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');
Related
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.
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 have an Angular Application with the following structure:
Structure
As you can see, there is a backend directory (yellow marked) in which other directories exist, such that the following path is valid: backend/uploads/users/user123/unnamed.jpg.
Now I want to use that image in my app.component.html
<img src="">
I tried to put the path in the src-property in different ways but the image is not appearing. How would the src has to look like to use that image in my Angular project?
I guess you are using the angular CLI. Therefore you should put the image in the assets folder. Try again than and it will work.
Like this:
<img src="/assets/images/unnamed.jpg">
EDIT: I am sorry, did miss out that part. You need to edit the angular.json file for this. Add the path of the backup folder there to the assets. But the backup folder must be in the src folder for this to work. Thats my suggestion for a solution.
So you will be adding "src/backup"
I don't think what you want to do is actually feasible. if you want to use an image in an Angular app, it's either an asset and you put it in the assets folder, or it's a resource coming from your backend and you will have to write a proper mechanism to expose the wanted resource, and then use it in your Angular app.
I'm trying to use a jpeg that I have saved into a file as a background to a html file using its file path as the url. I have the following but it doesn't work. Any thoughts?
<style>
body {
background-image:url('C:\Users\...\background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ok, So giving relative path is very easy, only you need to understand the basic folder structure of your project, although I am not sure how you are keeping your files and folder structure so I will tell the ideal folder structure for front-end project (according to me), and will explain to you how you can use a relative path for assets,
let's keep the main HTML file in a folder named by your project, For example Peadar08 is the project name. so put an index.html file in your folder, and on the same level keep a folder for your assets, like this...
then in ASSETS folder create more folders for your respective assets(images, js, css etc), like this...
Now just see an example for images, and you can follow the same for other assets,
So you can use images in 2 ways,
As an IMAGE by img tag in your HTML, so keeping in mind the above stuture you can use images in your HTML like this.
<img src="assets/images/example.png" alt="altText"/>
So your image will render perfectly as assets and your HTML file is on the same level so just mention the path starting with the folder name.
now see another example if you need to use your image as a background image by CSS
so all you need to do is use of ../ to go one folder back, just because you are in css file and ../ this will take you one folder up, I.e in assets folder and then you can foloow the path. so in your CSS use this..
.ExampleClass {
background-image: url('../assets/images/example.png');
}
to move 2 folder up just use ../../ and so on.
Hope this will help you.
You don't need to specify location directly from the C:, but from the root directory in relation to where your index.html is.
You could just copy the link directly from where you found the image by right clicking the image in the browser and selecting 'Copy Image Address' and paste that in the image URL.
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.