Why I can't see my image even if I have the right link?
Code:
<img href="Layout-home.jpg" style="">
The path of the root is in a USB ("grafica"), and the enteire link is:
file:///E:/MIKY-BEN/grafica/Layout-home.jpg
"grafica" is the ROOT. (whith the index.html file inside).
The attribute is src, not href. This error would have been picked up if you had used a validator.
Related
I'm making a Landing page and I want to put there some png images links but they don't show. When I set png as background image I saw it on the page but casual <img>doesnt work. Path of the file is okay, I'm sure of that, but console says "404 file not found".When I'm using exactly the same path as bg image it works perfectly I don't know why... I'm writing styles in SCSS and using components for different parts of the site if it matters.
Plz help I'm new T.T
here are the links
<div id='media'>
<a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
<img src="/src/images/facebook.png" alt="ikona facebooka">
</a>
<a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
<img src="/src/images/linkedin.png" alt="ikona linkedin">
</a>
</div>
and structures of my folders looks like that:
./src:
../fonts
../images<--here are the png files
../js
../sass
../templates:
.../components
...index.html
./web:
../css
../images
..index.html
Your styles.css file is located in a different place than your template files so the path SHOULD be different.
From your stylesheet location
web/css/style.css -> ../../src/images/filename.png
From your template location
src/templates/index.html -> ../../web/images/filename.png
Here's what to do to troubleshoot file paths:
Open dev tools => network tab (select images in your case)
Look for the file in question
If it's 404ing your path could be bad.
Try to load your image in a new browser tab with the full URL path you THINK it should be. (make sure it's serving properly)
Then check that full/serving file URL against the URL in your code
Is this a WordPress site? If so make sure to output the full path with
<?php bloginfo('template_directory'); ?>/path/filename.jpg
Remove the '/' from the beginning of the image path.
So change this:
<img src="/src/images/facebook.png" alt="ikona facebooka">
To this:
<img src="src/images/facebook.png" alt="ikona facebooka">
I have my css which contains a class
.Img{
background: url('../assets/Trump.png');
}
And the html looks like this :
<div class="Img">
But when I want to have it like this
<div class="Img" style="background: url('../assets/Trump.png');">
the image won't load for me and I get an error
>GET http://localhost:8080/assets/Trump.png 404 (Not Found)
I am working with vue.js 2.0 and webpack
The main issue here is relative paths.
If you have this structure for example:
/page.html
/static/
/assets/
/Trump.png
/css/
/file.css
And inside your page.html you have a <link> tag to your css (in static/assets/css/file.css), the call to ../assets/Trump.png from that css file will get to the correct place (because from the /css directory - 1 directory up is the static directory, and from there we go inside the assets and everything is ok).
However - If we are inside the / directory (where the page.html exists), this is also our root directory, when we try to go to ../assets/Trump.png the relative path we get is /assets/Trump.png (which does not exists in our server. The correct path should be /static/assets/Trump.png).
You should check the structure of your directories and put the correct relative path.
Remove the apostrophes in the url(), url() function does not need them
<div class="Img" style="background: url(../assets/Trump.png);">
Edit your image url to this
<div class="Img" style="background-image: url('assets/Trump.png');">
when you are declaring this background-property in your css the url is correct the assets folder is in the parent directory of css. but when using inline css the assets and the html file are in the same directory that is why you are getting this error.
Check your image path, there's a chance that's the issue. Check this out: CSS background image URL path
I have two image descriptions in HTML on my local PC:
<IMG src="url('myimage.png')"></IMG> <!-- this I call "explicit" -->
<IMG src='myimage.png'></IMG> <BR>
Neither Mozilla, nor IE do show the first image. Naturally, I tried to interchange apostrophes or omit apostrophes and so on...
Why don't browsers seem to see an image described by the 'url' keyword?
You can only specify an image using a relative or an absolute URL. The url keyword is used in CSS to express an image location.
Refer to http://www.w3schools.com/tags/att_img_src.asp for more info on the img src attribute.
Some working examples:
Relative url, can only be used if the html file in on the same dir:
<IMG src="myimage.png"></IMG>
Relative url #2, can only be used if myimage.png is on dir images inside the same dir as the html file :
<IMG src="images/myimage.png"></IMG>
Absolute url - can be used from anywhere
<IMG src="http://something.com/images/myimage.png"></IMG>
The same as the above, without including the website, must be used inside domain something.com
<IMG src="/images/myimage.png"></IMG>
Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now
I'm trying to display an image with the tag and referencing an image in subfolders, but it doesn't work, it only works when the image is in the same folder as the script file.
Here is my code:
<img src = "SubFolder\SubSubFolder\plant.png"/>
Try <img src="SubFolder/SubSubFolder/plant.png" />
HTML uses forward slashes (/), not backwards ones (\).
If this doesn't work, it would also benefit to check that the image at SubFolder/SubSubFolder/plant.png actually exists.
<img src="your path here " alt="alter text " height="42" width="42">
this will help and make sure the path should not have space
one more thing that whether file is in same folder or not start giving path from root /mainfolder/sup/../file.png that would always work