I read adding image to eclipse web project which should be the same problem as I do.
But the solution is not working for me.
I also have the same folder called images inside WebContent, and i have a jpg image inside it. And in the html web page, i use <img src="images/qrcode.jpg" /> . The page does not show the image, I also tried, <img src="/images/qrcode.jpg" /> <img src="../images/qrcode.jpg" /> but they not work either.
Can any body help me with this?
PS: I use the below code to to go to my page(wodinow is the project name, the html is inside the folder of pages)
response.sendRedirect("/wodinow/pages/userhelp.html");
have you checked given extension is correct? may be JPEG, jpeg. If nothing is work post your folder structure.
Related
Alright, so I have been attempting to get an image to display in one of my subpages in HTML. I am sure that this is a very simple and stupid issue in regards to how I am referencing the image in the code. The image file is called crab.jpg and it is inside the pics folder which is all contained in the Websites folder. I have no problems with similar code displaying images within the index file which is the main page for the website.
<img src="Websites/pics/crab.jpg"
width="400"
height="400"/>
Not sure if this will work, unless it's in a subfolder. But try adding /
before the Websites
if that doesn't work try ../
and if that doesn't work try ../../
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 am designing a web page in html language. At some point I have to insert a .jpg image that I downloaded from the net.
I saved the image on my desktop. Then, I insert it into the web page this way:
<img src = "image.jpg">
The image doesn't appear. But a default icon appears in its place.
Try putting the image within the same folder as your HTML file.
If you're going to be using images on your site - the images must be somewhere within the directory of your current HTML file.
For example,
Root Directory|
index.html Images |
image.jpg
Then within your index.html file, you would have:
<img src="images/image.jpg">
Hope this helps! :)
<body>
<img src='image.jpg'>
</body>
If you want this could work, you must put image.jpg and your html into the same directory.
I uploaded an image, and linked it to the html file using proper extension and proper link to the image. Even then, the image doesn't show up.
Here's a link to my website- http://valaparthvi.github.io/
And a link to my github profile- https://github.com/ValaParthvi/valaparthvi.github.io
What is going wrong here? What are possible solutions?
The source for that image includes your home directory (/home/). No one else in the world knows that. You need to provide a proper URL that a web browser can reach. The URL for that image would be //raw.githubusercontent.com/ValaParthvi/valaparthvi.github.io/master/DSC_07321.resized.png.
Understand that when you upload a website to GitHub, it stores all the files there. All the paths to those files must be reachable by someone on the internet. Hopefully I cannot access your home directory.
GitHub pages also provides more convenient, branch-agnostic URLs. For your image, it would be /DSC_07321.resized.png. The advantage of this is that the source is not defined, so it will work locally and when deployed. In both other cases, when using your home directory or when using the fullGitHub URL, you're using an absolute URL, which won't work across multiple sources.
Jamie Counsell has the answer for the image:
<img src="/DSC_07321.resized.png" />
I would also remove
img {
padding-left: 1000px;
}
And instead surround the <img src="/DSC_07321.resized.png"> with a <div> tag with text-align: right, so it'll look good on different screen sizes.
Like this:
<div style="text-align: right;">
<img src="/DSC_07321.resized.png" alt="profile picture">
</div>
Hope this helps.
Your image has the wrong src. Try this instead:
<img src="//valaparthvi.github.io/DSC_07321.resized.png">