I created a website using HTML and CSS and there are a lot of images on the website. However, for some reason about 20 of the images don't load in on Apple devices. On desktop and my android phone all images load fine but on my iPad and an iPhone I tested it out on they don't load, only an alt tag is displayed. Can anyone help me fix this? I have had a look to see what is common about all of the pictures that load and I can't seem to find any similarities. They are all around the same file size, even the ones that load being bigger on some a lot of occasions. The URL is https://www.fredsfashionboutique.com/ if you would like to have a look for yourself. On the home page they all seem to load fine but in the clothing section they don't.
TIA,
Freddie
Its to do with the image itself, not sure what though.
The fix:
Go to image link > Copy Image > Open photo editing program > Paste image (don't open the image, make sure to paste it, its something to do with the metadata) > Export as .png > reupload to site.
Testing image: https://www.titusstudios.net/data/static/images/miscellaneous/04052020/neilbarret.png
Related
Sometimes images are not loading properly in my website. Not completely. Lets say page includes 15 images. Two or three images not loading properly. Showing like this. When I refresh page, all images loading fine.
(Browser cache disabled)
The strange thing is this. If I inspect not loaded images using dev tools, get image url and paste it into new tab. Image is there!
I just want an idea why this is happening. Is this common issue? or bad host? long css file? or other issue?
This website contains more than 13,000 images stored in db.
I have a website with all coding and appropriate html and file paths for my images. When I run the code through my own testing process, everything works. However, when I upload my html files and picture folders to the hosting site Web Hosting Pad, none of my images show up, instead a black "x" appears. Everything is uploaded and on the site. This is what the website looks like when hosted through Web Hosting Pad (Web Hosting Pad version) VERSUS what it looks like through my own test (My Testing Version). I honestly have no idea what or why this is happening, if its a coding problem or something I'm missing in how I'm hosting the site. Please help if you have any knowledge or idea of what I should do! This is what my code looks like for my images. Code
Did you save your images as jpg or jpeg?
You image tag is wrong, it's necessary to close it with "/>"
When I view my site locally on my laptop, the site looks perfect and works. But once I copy my files to the server, the live site looses the CSS and all the image links are broken. The images and css are properly linked and I have renamed and reuploaded the files several times (thinking it was a broken transfer). This is a project page from my main site and I don't have any issues with any of the other pages. Is this a server issue or a code issue? Any ideas on what this could be/how to fix it?
The problematic page is http://squigua.com/AD/R1NR/norules.html
The style and photos should leave the first initial screen looking like this:
black background, centered text, pictures, funky typeface
Your problem is that all your resources are in a folder named "AD".
Adblock will just assume you're serving up ads, so it will block ALL resources in that folder.
I have a small five page website and have the images used across the website in the same folder, img. The website works fine offline and I upload everything with the same structure, however when I view the website on the server, certain images don't display for some reason.
For example, my logo and image slider photo's appear, but then images in the gallery are broken. They're all linked correctly, eg:
<img src="img/logo.png">
They're all name appropriately too, such as slider_1.png etc.
I'm not sure why some display fine whilst others don't, despite them all being in the same folder and being linked the same way in HTML.
Ok, the images are now working but for some reason the CSS isn't working correctly on my own server space, but works on my schools. I haven't played with any of the server settings etc.
Had the same problem and after reading half of Google saw that the new version of FileZilla changed the image extensions from .jpg to .JPG when uploaded to the we- problem solved.
You can change the code like this:
<img src="yourdomain.com/img/logo.png"=
I have a website that works correctly on my computer but when uploaded to the server there are several links that are no appearing. When I check these links through developer tools and it says 'Natural 1 X 1' when the image size is actually 192 X 122 pixels. The images are uploaded and appear on the server.Here is how the link looks:
<img src="img/ads/Christie_Lamb_WJO_Advertisement_TN.jpg"/>
I have other links with other folders that work fine, such as:
<img src="img/website_tn/Murray_Raine_Puppets_Website_TN.jpg">
and the offending website page online:
http://elementalarts.com.au/posters.html
Any help appreciated
This is probably because of adblock, avoid any folders with the name ad/advert when uploading images.
Tried to disable adblock on your page which solved the issue for me
Are you using Adblock or any other advertisement blocker?
Adblock sometimes blocks images that come from a folder called ads or others similar to that.
When i turn my Adblock off, i can see your images.