my problem
when I use notepad++ it's fine but when I move to Vscode it won't show up in browser
I'm a newbie in this field, and this is the first time I use Vscode , please help.
<img height="300" width="100"src="mysf.jpg">
Rather than just giving the name of the image, it’s better to give the whole path of where the picture is on your device -
<img height="300" width=“100" src=“/User/…/…”>
This will help.
This has nothing to do with the grammar of the img tag, you can see my example below, it can be displayed normally, this is related to the path of the resource on your website, you should proceed in this direction
<img height="20%" width="20%"src="https://www.happycoding.today/storage/cover_images/%E6%9C%AA%E5%91%BD%E5%90%8D.jpg_1541838726jpg">
Because there is too little information on the website, here are two suggestions for you
Confirm what is the correct relative path
Instead of using relative paths, use absolute paths instead
Here are more concepts and examples of file paths, you can refer to this study
Related
I am not able to add a picture in vs code HTML showing error not able to resolve it but this same question working on notepad how?
how can I fix this and how can I add pictures to the file
<img src="./girl.jpg" alt="profile pic"/>
Please correct the image path. Use below mention method
When assets like images is placed beside of your project, you can use A relative URL like src="girl.jpg".
For more information look Absolute URLs vs relative URLs in this article.
Now, your img tag must change to this:
<img src="girl.jpg" alt="profile_pic" />
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 a URL to this link
http://www.weebly.com/editor/uploads/8/5/0/1/85017748/custom_themes/762476756986669176/files/img/home22.jpg
I am trying to use a relative path instead of an actual url. For some reason when I do this
<div class="background-image-holder">
<img alt="image" class="background-image" src="files/img/home22.jpg">
</div>
The image doesn't show, but when I use a url it shows just fine. Any ideas on what I am doing wrong? I've also tried ../files/img/home22.jpg and img/home22.jpg but neither worked.
Clearly you have a problem with your relative path, the easiet solution to fix this, is to inspect your html code and see what is the path set after that you can figure out which part of the URL you are missing. We can't really help you with the exact relative path you need, because we don't know which system CMS or Framework you are using ..
To inspect your HTML code, open your website in google chrome or firefox (you can use firebug) and right click => Inspect Element
Im at a loss with this, im creating a mobile version of my website with jquery, but my images are refusing to load with img src tag.
<img src="images/me.jpg" width="200" height="267" alt="me">
ive tried using to load my image straight from my website but they're refusing to load also, and moving the image to the same directory as the web page, but still nothing. I just get a box the size of the width and height with the alt text and an image icon in the middle.
I just don't understand whats wrong with it.
thanks in advance.
Try to work with the full path as:
<img src="http://www.yourdomain.com/images/me.jpg" width="200" height="267" alt="me">
For test purpose just open http://www.yourdomain.com/images/me.jpg and you should see the image. If it does not work, there must be a compatibility issue with your html/jquery. Just post the rest of your html file and tell us about the jquery plugin(s) you are using ...
My images were in fact corrupt or not working properly as I couldn't open them in Photoshop, I had to replace the images.
I have just had the same issue. It was capital letters in the filename. Some pictures were loading some weren't. Some pictures had uppercase .JPG file extension, and some had lowercase .jpg. My HTML code referenced all of the images using lowercase .jpg.
I'm running webserver on my Synology DS.
I just started writing html last night so this is a total noob response because i just had the same problem, but if youre on a windows computer then your slashes in the file location should be back slashes instead of forward slashes
like i said- total noob but hope it helps
Make sure that you are in the right subdomain in case you are using dev, staging etc.
I was wondering too, until I figured out that I am on the staging domain where the image does not exist.
Also make sure to clear the cache.
If you try different things and it doesn't work, just move your image file to your working folder where your HTML file is.
The following works:
<img src="me.jpg" width="200" height="267" alt="me">
Be aware if you are using thymeleaf. Then you must have source like: (It by itself go through and do not take repository paths,...).
<div id="upperPart">
<img id="foxPicture" th:src="greenfox.png" height="200" width="200" alt="Green Fox logo"/>
<a class="Mr.Fox_description">This is Mr. Fox. Currently living on pizza and lemonade. He knows 2 tricks. </a>
</div>
One other possible cause is your server has a bug which has crashed it. When that happens, it will show the same error.
If your server auto-restarts on crashes, it can be difficult to reproduce this bug to fix it.
This happened to me while using PM2 with NodeJS.
List item
Just go the image location on your drive
select the image
open it using your favourite browser
go to url bar
copy the location from the url bar
use it in img src=(paste over here)
It will look something like this
img src="file:///C:/Users/Mercy/Documents/WEB%20DEVELOPMENT/HTML5/lion.jpg" alt="Lion profile picture" height="300" width="500"
I've solved my problem by replacing src="image.jpg" with src="file:///c:\FULL_PATH\image.jpg"
As per my title, what is the correct way?
I have seen both of these appearing in websites:
<img alt="My image" height="60" src="http://www.website.com/images/myimage.png" width="80">
And
<img src="images/myimage.png" width="60" height="80" alt="my image"/>
What is the good of each type?
Does the 1st one aids in faster loading of image as compared to the 2nd one?
Thanks.
The second example is a relative URL. In general, it's better for scalability when you don't hard-code things like URLs.
The only difference is that if the image is not in the same domain you have to use the full URL. There is no difference in speed.
If you have relative URLs the images break if you move the HTML file somewhere else; if you have full URLs the images break if you move the website to another domain.
i prefer the 2nd option. the link is relative to the path were your html file is located. if you copy your site to another subdirectory etc you don't need to update your html code which you have to when u choose the first option.
if the image is on another domain, then the first option is the way to go.
If you are following best practices, you should have multiple environments, say for development, testing, QA, pre-production and production. For this reason alone, the URLs should be relative. If you do all your development and testing in prod, well... this is a bad way to do business.
It is defenitely better to use relative urls. Because when you change something in your structure of your code, you would have to change all the references to the images as well.
With relative paths you don't have to change anything at all.
The second example is not that correct to load the images.
Use Root-relative URL for good practice
<img src="/images/myimage.png" width="60" height="80" alt="my image"/>
These URLs are always relative to the root of the folder. These URLs are useful while moving between servers.