Website works on localhost, when uploaded does not display images - html

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.

Related

google chrome doesnt show photos on my websites

I want to show some images from another websites in my website. This is the code:
<img src="https://www.alaedin.travel/Files/Original/Hotels/mashhad/aban/Alaedin-Travel-Agency-Mashhad-Aban-Hotel-Facade-1.jpg">
Images arent shown in Chrome. But I can see them in FireFox.
whats the problem?
The issue is with chrome being stuck in redirection as you can see in the logs:
I am not sure why is that behavior. I suggest that you store these pictures in a static folder as a temporary solution if you can, or try using fetch requests while enabling CORS.

Images from website aren't loading on Apple Devices

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

Broken Images and CSS Only on Live site

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.

Images not showing when uploaded to server

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"=

.png images not displaying

I have a issue of displaying .png images on web my web page. Other image types excluding .png just work fine. The issue is .png. The web site is located in a sub domain. In the root, a wordpress site is running.
In firebug, I can see a 403 error. But I can assure that I have set 0777 permissions for all images. It couldn't be a permission issue.
Rarely, .pngs are loading. But the second request gives a broken image. I have applied different cache removal techniques including <FilesMatch> directive in .htaccess, appending version attributes to image link, using # ...etc. But nothing works.
The most complicated point is that when copy & paste the image link in browser it shows the .png. However not within a web page.
Can anybody help me resolve this?
Thanks in advance.
Even I tried executing it in a browser. But the .png image doesn't showup for me.
Try changing the image folder permission to 755 or 644.