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 ../../
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 need help. I am VERY new to learning HTML. I created a very basic / practice HTML file; this is all I have learned so far. I want to display an image but the image will not display. I am using FileZilla to upload my webpage. On my desktop I have my project folder with my index file inside and another folder called images. I uploaded this to FileZilla and uploaded again there. Not working; need help! I really need simple precise answers as I am very very new. Thank you!
Below is my desktop, Filezilla, my html and my page
My desktop folder
Filezilla
My HTML
My Webpage
You need to find the position you want to place the image in the index file. Then you can use the image tag. As the image is in a subfolder that's why you need to write the image tag like this
<img src="/images/example.jpg" alt="Testing" width="600" height="400">
Here you can remove the height and width if you want also reshape the image size by changing height and width
I have the index.html file, where iside I put CSS as inline style. I'd also have inside links to images, not to path to images. Finally, I'd like to have index.html file which will contains evrything inside as one file. How can I make not to get images from computer path but have a links to my images?
Thanks for help!
If I understand you correctly, you are seeking to build one huge file "index.html" which contains all the information needed to display what you want to display.
Think that this is something extremely unusual. Why would you need that? Probably there are better ways to achieve what you want to achieve.
If you really want to go for it, ideas that come to mind are:
* use simple graphics in form of .SVG images, these can be described with the HTML SVG tag
* use compiled HTML (.CHM) (https://en.wikipedia.org/wiki/Microsoft_Compiled_HTML_Help) - but not for the web...
when u want to call image from outside then call like below when you use http in url it will never look for local file path
<img src="http://www.domainname.com/yourimage.png" alt="image">
You can make a folder like images where is your index.html then put your all images in images folder & link your images like this
<img src="images/logo.png" />
This is folder path not from your computer, When you will upload it then this path will be automatically global
or you can use direct link from server like this:
<img src="https://www.example.com/logo.png" />
The best way would be to include all files relationally in a /images folder however if you need a one file solution then you could encode the images in base64 and use that in the src=""
I'm currently working on an assignment for school right now, and I'm trying to get an image to show up from another file.
Right now, I'm working on a page in my HTML folder, I want to get an image of a bird from my photos folder.
I typed all of the code correctly, I can't get the image to show. Both the HTML folder and the photos folder are in my Gallery project document/folder.
Here's some of the code I've already tried.
img src="/photos/bird.jpg"
img src="photos/bird.jpg"
img src="bird.jpg"
img src="gallery/photos/bird.jpg"
Again I have tried just about everything and it still won't show. I re-sized my images in Photoshop and I wonder if that messed something up. Any help would be great, thank you.
(PS. Yes, I am including the brackets, and all of the small details, i just didnt include it for the sake of time.)
EDIT: Not sure how much this really matters, but the photos folder is one level below my HTML folder. Also, my teacher wants me to keep my photos in certain folders, so I can NOT put the image in my html folder.
You have to show us the full directory path for the html and the photo for an answer.
Heres an example though:
html: project/html/index.html
photo: project/photos/examplePhoto.jpg
If you want to include the listed photo on your index page the source in the image tag would be: src="../photos/examplePhoto.jpg".
The "../" is to go back one directory, placing you in the project folder in this situation. Look up "relative pathing" to gain a better understanding.
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.