I have an image which should be displayed on all the pages....it is working perfectly fine for all the pages except for a single page. On Inspect it shows could not load the image.
<div class="wrapper">
<img src="images/uk.png">
</div>
From the look of your code, my guess is that it appears to be a relative path problem. The page in which you cannot load the image successfully is probably in a different folder to the pages where you can load the image successfully.
<img src="images/uk.png"> is a relative link. According to that link usage, the file uk.png needs to be in the folder images, and the folder images needs to be in the same folder as the file you are trying to include the image on.
If your images folder is not a sibling of the file you are trying to include the image on, you have three options:
use ../ to navigate to the correct folder (<img src="../images/uk.png">)
use the root-relative / prefix (<img src="/images/uk.png">)
use an absolute URL (<img src="http://www.example.com/images/uk.png">)
For more information about relative paths, check out CSS Trick's article, Adobe's article, or IfYouCodeItTheyWill's article.
If you have ensured that your index file is indeed in the correct location, and your path is indeed correct, you may have a caching problem. Try holding SHIFT while clicking the refresh icon, and see if that works. If not, you can bring up your console with F12 to further debug the problem.
Hope this helps! :)
Related
code:
Why am I not able to see any image here to open amazon?
NOTE: image is saved as th.jfif on my desktop and not in any folder
was expecting to see the image
The issue you are having is very likely due to your image not being in the correct location from where your img is expecting it to be.
I would say take the image from your desktop and place it in a folder, maybe called site. Then put your HTML file and image file in the same site folder and load your page again. Then your path mapping should be accurate and your image will render.
I say it is your path mapping because rendering your HTML link using an online image works just fine.
<img src="https://turnerduckworth.com/sites/default/files/styles/case_study_single_image_s_2x/public/2019-03/5_Amazon_Lettermark_2560.jpg?h=a92f03cd&itok=2nBmNv14" alt="website" width="100">
Surely this is to do with having no file or folder structure. Your image and web page must be detailed relatively to each other.
<img src=" path to the image from the web page location ">
If your web page has a folder with it called images and inside it are all your.... images.
The path will be
src="images/picture-title.jpg"
Read about file structure. To begin with, put your web page inside a folder of it's own and also in that folder create an images folder.
I suspect the path does not match the location of the image you saved. the whole tutorial is on here .
for the example, you saved your image in path images , so you should should type it like this:
<img src="/images/th.jfif.jpeg">
and don't forget to write down the image file extension clearly. hope its help
I have come into an issue where my webpage will not load a background image in any browser if I open it directly into the browser, but if I open it up via a live server addon for VS code it works entirely fine and loads everything correctly. I have videos attatched to the webpage which load entirely fine in both scenarios, and have come to a bit of a deadend...
file's to see if file pathing is incorrect
Where the image should be loaded
The html file calling the class
This is a guess at the moment but it might be, on the second image that you posted, that you have detailed ../../ twice. This is telling the path to back up by two folders then look for the assets folder.
Looking at your file layout. You have an index page then an assets folder which contains a videos folder which contains the image.
You shouldn't need to back up out of the folders using any itteration of ../ from where you index page is located. The correct path might simply be assets/videos/cover_image.jpg
I have 2 cfm pages in the same folder, doing very similar things. They both produce some reports for user related data. I recently added a loading image to one because some of the queries to generate the reports can take a while.
The second page is a new but very similar page. Since the pages are in the same folder I figured the relative path to the loading image should be the same. However the new page is giving a 404 response for the image request, and when I check the http request header it is adding an extra folder to the relative path and thus unable to find the image.
<img src="../../../Graphics/General/loading.gif">
They are both very similar pages in that they display a simple form, then run some queries and generate a table to display the relevant data to the user. However the relative path above produces "Dev/Menu/Graphics/General/loading.gif" in one page and "Dev/Graphics/General/loading.gif" on the other.
I've since figured out that adding an extra "../" to the image path in the new file has fixed it for the new page, however I am at a loss for why this fix was necessary and why it worked.
<img src="../../../../Graphics/General/loading.gif">
I would expect that since both pages are in the same exact folder, that the relative path to the given image would be exactly the same. I am mostly just curious why that is not the case.
The two reports are in the same folder. Are you loading these pages directly?
yourSite.com/reports/report1.cfm
yourSite.com/reports/report2.cfm
Or are these files loaded via other parent pages?
yourSite.com/some/other/folder/with/include_report1.cfm
yourSite.com/yet/another/folder/that/contains/include_report2.cfm
Often, it's better to load images directly from web root in order to avoid relative pathing issues like these. If the Graphics folder is at the root, then just reference the image in both files like so:
<img src="/Graphics/General/loading.gif">
This way, it doesn't matter what file includes them and renders the final HTML to the browser, the image will be referenced from the web root no matter what.
On my webpage www.example.com I display images next to texts. Some pictures of the folder "minipics" are not getting displayed.
Path in HTML:
<img src="minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
However: Opening the image directly in the browser via "www.example.com/minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" works!
What is strange: When I after having opened the picture directly via the absolute path (as described above) reload the page on which I expect the images to show up, the picture that I just opened directly gets displayed. But only this picture, NOT the other ones.
Only some pictures that are contained in the folder "minipics" do not get displayed. For example, those pictures uploaded via a new picture upload do get displayed.
Can anybody see a solution to this problem?
you can try to add a slash ( / ) to the file path.
In your url the folder is in the document root. If your file isn't, this can help.
<img src="/minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
If your folder structure is like below
index.html
minipics
m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg
Then change the code to below
<img src="./minipics/m_5b56aa7040b4f1224ee19c17b6f73ab1.jpg" alt="">
./ means current folder.
Hope this will help you.
Apologies if this is an idiotic question: I used the following src declaration within an img tag to display an image on a Bootstrap website in phpstorm under a laravel blade file: src="C:\Users\MAHE\Pictures\Wallpapers\photo.jpg".
The image does not display; it's just invisible because the mouse pointer is showing the hand symbol when hovered; however, the image displays perfectly when the src declaration is:
src="http://weknowyourdreamz.com/images/apple/apple-02.jpg"
The first link is pointing locally (C: drive). Are you using a localhost or displaying it locally or is it live on a server?
If your website is hosted locally:
Use a relative path, example: images/file_01.jpg
If your website is live:
Use a link to an image that is on a server, as the path is meaningless in this context.
EDIT:
(Elaboration on relative paths to give more clarity as per comment)
The location for the relative path would be wherever the file is in relation to the file that you are trying to link from, so you would need to host the file with the site in order to achieve this. The link itself would depend on your file structure, a typical link would read such as: ../images/cat_01.jpg (the preceding "/" , "./", "../" represent Root directory, current working directory, and parent directory, respectively).
This Link provides a good summary of Relative vs Absolute paths.
If you cannot achieve this then host the image wherever you can and provide the entire URL for the image. Example src="http://www.forexample.com/images/cat_01.jpg".
As you should now be able to see, this is why the second link works. Your file can actually access this image whereas the first link points to a specific location on a computer - this makes no sense in a web environment.