HTML Relative Path Not Showing Image - html

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

Related

html image will work on one page but not another

Im using Atom to do some homework, I am a beginner at html this is my first assignment and I am trying to make my first page, however I am having problems getting my images to show up. I got them to show up on a previous page and now I have moved on to a different page and tried to use the same and it won't show up, I even tested it on another page and it works on there, I don't understand what im missing can someone please steer me in the right direction.
img tags have a property named src. this prop should fill with path of your image. if you use absolute path, it should started with '/'.
imagine that you have a directory named 'public' and a file named 'image.png' in that directory. you can use img tag like this:
<img src="/public/image.png"/>
keep in mind that start slash is referred to the base directory of your project.
to check the path, you can inspect in your html file. open your html file in your browser. right click and select inspect (or you can press F12 and go to inspector tab if you are using firefox or chrome).
find the <img {...}/> element and check it's src prop and path url. keep in mind that the path should open the image. if that's not happening, there is a problem with your path.

HTML image not displaying even though the path in the img tag is correct

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 am not able to add picture in vs code html showing error not able to resolve it but this same question working on notepad how?

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" />

How to embed HTML iFrame into mkdocs/material?

I'd like to embed an HTML file into an MkDocs/Material page.
I'm trying something like what's below, but getting a 404 error.
Any idea of the right way to do this?
<div class="map">
<iframe src="map.html"></iframe>
</div>
For what it's worth, a link like this does work, but I'd like the option to embed it in the current page.
[Show a map](map.html)
404 error seems that map.html is located somewhere else, while [show a map](map.html) may generate correct link. map.html is relative to viewing page, so I recommend to:
get absolute url of map.html file, e.g. When you click on Show a map what is absolute URL in browser location bar?
put that absolute URL into iframe src="absolute url"
you may make the absolute url relative - based on address current address in location bar
Actually the index.md files behave differently. Relative paths work with them, but I also found a workaround for keeping it at relative paths: I went up one level to root then I used it as if it in the folder that gets generated in the site folder when you run mkdocs build See it in my sample docs here: https://agu3rra.github.io/volpy/ Link to the repo is on the top right corner.
Cheers!

img tag not working in drupal content

I tried to use <img src="sites/all/themes/bluez/images/team/zin.png"> in drupal content. But, it doesn't working properly. I also choose Full HTML in text format.
The image only show blank screen and when I click the image url, it says
Not Found
The requested URL "/planz/node/sites/all/themes/bluez/images/team/zin.png" was not found on this server.
Please help my problem. I'm new to Drupal.
Thanks.
Try to make the target path absolute.
Visit the absolute path from your browser - There you can easily see if you have the correct path or not! When you have the correct path, than you can insert that to your code!