Everything else on my HTML page is showing up OK except my "cute_corgis.jpg" image. There's no "official" error, but only the image icon is showing up.
Here's my code:
<img src='cute_corgis.jpg' width='130' height='50' alt='Cute Corgis'>
The image is in the exact same folder as this HTML file, and the image name is correct. What's the problem?
P.S. I am using PythonAnywhere to run this webpage, if that's relevant.
See https://help.pythonanywhere.com/pages/StaticFiles/ for how to serve static files on PythonAnywhere
You'll need to use ./ as it doesn't know where to get the file from, ./ being the root directory the HTML is in.
<img src='./cute_corgis.jpg' width='130' height='50' alt='Cute Corgis'>
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 made a parallax website but it doesn't load any images everything else from css does load except the images . Nothing worked so far . Don't know if there is problem in the code or in the server .
html and css codes
404 error
files
Site is loaded but photos arent
problem you have here is that images aren't getting the right path.
I should understand the current file structure to give you a proper answer:
Let's say you have:
index.html
images/main.png
styles/style.css
If this is the case. You are calling the image from the root, because index.html is located there.
So you can try calling the image like this:
.pimg1{background-image: url('/images/main.png');}
If this doesn't work, you can do the following:
.pimg1{background-image: url('./images/main.png');}
The ./ will always go to the root and then it will look for the directory images/ This will help you with sites that has subfolders urls.
Hope it helps!
I am trying to load an image locally onto my html. I first tried serving an image path through a /images/ folder, but that did not work. I then tried serving images with the whole path to the image like <img src="/Users/code/src/code/go/src/websites/website/website-Bucket.png" alt="test"> but I still had no luck. I checked my html and it has no errors. I have restarted my PC, changed the image to .jpg, and it still did not want to work. I get an error in Safari - An error occurred while trying to load the resource and the image shows as a blue box and question mark. What things would you try to troubleshoot?
Extra - I am using goLang to serve the files. I have it so a http.handleFunc() goes off and serves the images folder when it is requested. The path is showing http://localhost/images/theImage.png "the correct path" but nothing happens. So, I save the image and it shows it as a html and shows a section of the page?? Would that be a path thing?
In first instance you have to understand the path source, when you are on a HTML file, your path inside the file should be :
<img src="images/website-Bucket.png" alt="test">
that's because :
the path of your .html file can access trough files the inside path with the "/folder/file" structure route in the html file, so your structure files should be:
yourfiel.html (your file render on browser) /imagesfolder
-website-Bucket.png" (you call it on your html as
/imagesfolder/website/Bucket.png)./
you can learn more about paths here :
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
Looks like it may be a file path issue.
Take a look at this page it has a good example.
https://www.w3schools.com/html/html_filepaths.asp
Also try renaming the image with a _ and not use the -.
Open Console in any browser and see if you see any errors that mention not being able to find the source path of the picture.
It should give you a hint of where your browser is trying to find that img.
All of your guy's responses were correct. I had the correct path. It was a Golang thing. I did not make a handlefunc when the server wants the /image.png. It was never serving the image, it just was doing nothing with it. Thank you for the responses.
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.
I am designing a web page in html language. At some point I have to insert a .jpg image that I downloaded from the net.
I saved the image on my desktop. Then, I insert it into the web page this way:
<img src = "image.jpg">
The image doesn't appear. But a default icon appears in its place.
Try putting the image within the same folder as your HTML file.
If you're going to be using images on your site - the images must be somewhere within the directory of your current HTML file.
For example,
Root Directory|
index.html Images |
image.jpg
Then within your index.html file, you would have:
<img src="images/image.jpg">
Hope this helps! :)
<body>
<img src='image.jpg'>
</body>
If you want this could work, you must put image.jpg and your html into the same directory.