Uploaded my website and my images are not showing - html

Source code for every image is <img src="img/image1.jpg">
I have a lot of images just kept it simple with image1 image2 image3...
but I also have subpages that have folders with images that don't work. I also did a responsive page that works on the computer when I shrink the window but not on the phone.

Update your image URLs.
For example:
www.mywebsite.com/images/myimage.jpg
You are probably still linking to your local images folder.

Related

How can I host an image on a React website for a thumbnail preview that isn't displayed on the site itself?

I am trying to upload an image to my React website so that the image can be used as the thumbnail preview when it is posted to social media. All of the images on my website are too high a resolution to be used. I want to have the website host images that suit a thumbnail display so that they can be linked in the meta data, but not have them shown on the page itself.
What would be the best way to go about this? And how would I get the image URL so that it can be linked as the preview image in the meta data in index.html?
I have tried hosting the thumbnail images on external sites and linking in and they are not loading, so it seems to work best when kept on the same website.
For those interested, the website is https://doe.games and I am testing the meta data with https://metatags.io/ The image preview currently works for Facebook and Twitter, but not WhatsApp.
Thanks!

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

Website works on localhost, when uploaded does not display images

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.