MAUI ANDROID why external images are not showing in webview

See more:

HTML5

MAUI

I want to load the following HTML page in Android webview.

html page[^]
This html page has mobile price. When user clicks on a mobile name, it opens the mobile specs in form of JPG image. Everything is working ok in browser and specs image is being shown in browser.
But, when I load this page in webview of Android app, it loads the page but when user clicks on mobile name in webview, it does not render the image and shows blank area.

What I have tried:

<style>.container {width: 100%;height: 100%;background-color: red;
display: flex;justify-content: center;align-items: center;}
.cl {    width: 720px;height: 440px;}</style>
<div id="mydiv" class="container" onclick="hidediv()">
<div class="cl"><h2 style="text-align: center;"><a>close</a></h2>   
     <img id="my-image" /></div></div>

<style type="text/css">
</style>
<table id="T_dab97">
  <caption>Updated on: 20-09-2023</caption>
  <thead>
    <tr>
      <th class="blank level0" > </th>
      <th id="T_dab97_level0_col0" 
         class="col_heading level0 col0" >Mobile</th>
      <th id="T_dab97_level0_col1" 
         class="col_heading level0 col1" >Storage/RAM</th>
      <th id="T_dab97_level0_col2" 
         class="col_heading level0 col2" >PKR</th>
      <th id="T_dab97_level0_col3" 
         class="col_heading level0 col3" >USD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="T_dab97_level0_row0" 
         class="row_heading level0 row0" >1</th>
      <td id="T_dab97_row0_col0" class="data row0 col0" >
      <button id='SamsungA04e' type='button' value='SamsungA04e' 
      onclick='SamsungA04e()'>Samsung A04e</button></td>
      <td id="T_dab97_row0_col1" 
      class="data row0 col1" >3/32 GB3/64 GB</td>
      <td id="T_dab97_row0_col2" class="data row0 col2" >33999</td>
      <td id="T_dab97_row0_col3" class="data row0 col3" >$. 116</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
document.getElementById('mydiv').style.display='none';
function hidediv(){document.getElementById('mydiv').style.display='none';}
function SamsungA04e(){myImage=document.getElementById('my-image');
document.getElementById('mydiv').style.display='block';
document.getElementById('mydiv').style.display='flex';
document.getElementById('mydiv').style.justifyContent='center';
document.getElementById('mydiv').style.alignItems='center';
myImage.style.width='720px';myImage.style.height='440px';
myImage.src='https://maliksuhail.github.io/mobileprices/samsung/Samsung_Galaxy_A04e_specs.jpg';}
</script>

wv.Source= "https://maliksuhail.github.io/mobileprices/all/"+fn+".html";

<StackLayout>
    <WebView x:Name="wv"
         HorizontalOptions="Start"/>
</StackLayout>