I have a template.html file and am loading it like this:
I am trying to include an image using the HTML img tag. The relative path is correct. I have tried putting the image in the same directory as template.html but it is not finding it. How can I include an image in the template.html file?
shiny will make available any resources in a folder named www/, in the same location as your app.R or ui.R/server.R files.
Create a folder named www/ and put the images folder in there and that should resolve it.
Related
HTML file location and mess.png file location in parent directory
I am trying to link an image to my HTML project using the relative path from the HTML file. The HTML file is in a directory that is the child of the directory that the png file is in. My understanding is that src="../mess.png" should work because I'm moving to the parent directory which contains the image file. However this has not worked and I can't figure out why.
here is an image of the code I am using
I understand it's best practice to have the image in the same directory as the HTML file, or in a folder within the directory of the HTML file.
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
I'm trying to display an image stored in my /public/img/"image_file" project's directory system.
/home/adrian/Escritorio/proyectos/mean-social-network/frontend/src/app/public/img/beach2.jpg
I'm need to display it from the next component HTML file: index.component.html
Why this relative path is not working?
Thanks for reading.
actually, you should have assets folder in one level with the app folder
and you can write URL in the components and HTML parts like this:
<img src="/assets/*.svg">
background-image: url('/assets/*.svg');
When I try to upload an image file form my computer in my html file it doesn't show up in browser. But if I link a image file from the web it works. I've copied the file path correctly and made sure the extensions were correct. Is it something wrong with the file itself?Code In Question
In the picture you've attached you're placing an absolute filepath inside src while it should be relative, considering the file might be in the same folder as the HTML, but not in the same user folder/operating system etc.
To fix your issue I have an example below.
Folder layout:
website
index.html
images
myimage.jpg
Referencing:
How to reference to myimage.jpg relatively is by putting images/myimage.jpg inside the src attribute. The way you're doing it is website/images/myimage.jpg, but another user might not have the website in a folder called website but website2 for example.
Problem: I have a file called index.html. this file has been included in another file called main.asp.
<!--#include virtual="/template/index.html"-->
index.html has a image tag <img src="abcd.jpg"/> image is in the same directory where index.html resides. ... When this method is being used it is not possible to display the images in index.html which has been included in main.asp.
Use an absolute path in the image src:
<img src="/template/abcd.jpg"/>
The browser will try to locate assets based on the relative position of the current document.
So you will need to reference the image from the location of main.asp in your file structure, not index.html