I'm trying to add an image, but it only shows up as a corrupted or unloaded image(I'm not sure what to call it, it's a tiny picture of a broken picture..? lol) here is my code....
<img src="funny_alien_01.jpg05e9a40c-bb67-46e2-a106-ac097b47bd28Original.jpg">
I've tried this with an image from placeholder and that works fine, I'm wondering how to use an image off of google images or an image saved to my PC. Thanks.
Check you image source link
Give a readable image name. Like: 1.jpg or 1.png
The path to the image in your example looks invalid.
To display an image from the web, you’ll need to use an absolute path:
<img src="https://www.example.com/images/dinosaur.jpg">
Notice how the path starts with https://
Check out this resource on how to use the image tag for displaying images from the web, or from your computer:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
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 am trying to display an image in my Angular project using HTML. The code is shown below
<img src="../../../../../Uploads/1640665063123--hc-Freeport.jpg" alt="Test">
I have verified that the link is correct. The file type is also correct. Additionally, the image has not been corrupted in any way since I can open it in Photos, Visual Studio Code, and Google Chrome. However, the image does not load in HTML. Instead, the "Test" text is shown. Can anyone give me some advice? Am I missing something?
The links below show the structure of my project. The second link shows the file in which the home-page component is located, which is where the image is supposed to be displayed.
https://ibb.co/Qj8HZy5
https://ibb.co/4JSk8g2
Try putting the image file in assest folder and use this path,
<img src="assets/Uploads/1640665063123--hc-Freeport.jpg" alt="Test">
I have had this problem before when making a website. Try to use the full path from the root or maybe try to use a different text editor or browser.
i'm new to html and css and i've decided to utilise my time spent commuting by doing a little coding on the go. As such, i've started a practice project using Droidedit for android, on my Galaxy S7, but now i've hit a bit of a head-scratcher. Attached images below:
With full URL code and result with full URL
With relative URL code and result with relative URL
Not sure where i've gone wrong here. The image is in the same directory as the html file.
Thanks in advance peeps!
You don't need that last "/" at the end after the jpg
I guess there could be an issue with path used to show the image. Instead of following
<img src="internal storage/download/htmlearning/jotpage1.jpg/" ...
try
<img src="jotpage1.jpg" ...
since your HTML file and image file are at same folder
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! :)
Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...