问题
I am having an issue where some images are not displayed in the mobile browsers on my iPhone, but I see them in all my desktop browsers. On my phone, I just see a blank box with a grey border where the image should be.
A couple notes:
- It seems to happen randomly because some images are displayed one day, and then will stop displaying the next day
- I noticed if I scroll through the page while it is still loading, I can often see the image, and then it disappears.
- All the images are placed in
IMGtags and are not background-images. All the links and file names are correct. - I have been able to fix some of these in the past by re-saving the image and then re-uploading, but it will then often revert to the same disappearing behavior
回答1:
Is it possible that your images are very large?
From this page regarding iOS Maximum Image Size:
IOS enforces a maximum image size in Safari Mobile. In most cases it's much larger than what would be used on a webpage. The limit can be encountered when developing HTML5 games and interactive applications that use large frame based animations. If an image is included that is larger than the maximum size, the image will not load.
Image types have different limitations: JPG images can be up to 32 decoded megapixels, while PNG, GIF and TIFF can be up to 3 - 5 decoded megapixels (depending on device). The maximum size for PNG, GIF and TIFF varies due to the RAM on the device. Devices with less than 256 MB of RAM can be 3 decoded MP, while other iOS devices are limited to 5 decoded MP.
Note the limitation is not measured by the file size of the image but the number of decoded pixels. One decoded megapixel (MP) is equal to an image with dimensions: 1024 by 1024 pixels regardless of the compression.
This page has some suggestions for handling large amounts of images (and by extension, large images). The content on the linked page simply suggests using javascript to load images as they are needed, and unload those images that are no longer visible on screen. The author found that images could be unloaded by modifying the src attribute of the img element to a much smaller image. After some period of time, the original image would get picked up by the garbage collector (~6 seconds, if I'm reading his code correctly)
Example from the link above:
var img = document.getElementById('idOfTheImageToUnload');
img.src = 'images/empty.gif';
Alternate approach which removes the image from the DOM entirely (which the author stated must be done on a timeout to ensure the removed image gets picked up by the GC.)
var img = document.getElementById('previous');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' + 'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
window.timeout(function() { img = null; }, 60000);
回答2:
Something that happened to me was that I was using background images and I was missing the closing ");" on the url. So images would still show in my computer but they would not show on any mobile browser. So, just for those crazies like me that might be too tired to figure this out. Don't forget to make sure the url is correct:
My mistake
url(resoures-services-dedicated-support.jpg
The correct way
url(resoures-services-dedicated-support.jpg);
Disclaimer, even though this might not be the right answer, believe me guys, seeing this would have saved me a couple of neurons.
回答3:
you can resize the image according to the display size. This is Sample code for my project logo and it worked.
<div class="image"><a href=/displayimage.php"><img src=/dir1/dir2/image.png" srcset="/assets/image.png **0.8**x" alt="image"/></a></div>
choose a reliable size 4x, 3x, 0.5x or include a number of them for dynamic display.
回答4:
I understand this post was from 5 years ago although,I recently came upon this problem and it was as simple as using a supported picture format for mobile browsers.
example: Instead of using a less common file type as in (.webp) try using more common types as in .jpeg or .png.
来源：https://stackoverflow.com/questions/25290813/some-images-not-showing-in-mobile-browser-but-showing-in-desktop-browser