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.
Related
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'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!
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! :)
I am currently designing a small website using JSP / Servlets. Tomcat is very picky about my routes.
My application can be entered throught the path /Final (on a localhost I have http://localhost:8088/Final).
My main JSP page is at http://localhost:8088/index.jsp. On that page, I have a navbar with several links. On one of those links, the "Home" link, I have the href set to /Final/index.jsp. When I hover over the link, it shows the links path as http://localhost:8088/Final/Final/index.jsp.
At first, I said ok, lets just change the href to index.jsp, but when I do that, the link now points to http://localhost:8088/index.jsp which will not satisfy the server. Why are links behaving like this? How can I get it to point to http://localhost:8088/Final/index.jsp without fully qualifying it?
You could use a relative path such as pointing it directly to it's location. I'm not sure if this would work, but try putting /index.jsp as the href in your link. This way it's going from your current folder "Final" and going one level down to index.jsp.
Apparently, adding the . before the path as in ./index.jsp works just fine.
Also, you can try to escape your file and specify it again, it worked for me.
For example: ../jsp/index.html
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...