HTML File :
<div>
<img src="New-Google-Logo.png"/>
</div>
Here the New-Google-Logo.png is in the same folder as in the html file. But after ng serve the html page loads with other details, but not the image. Tried by directly giving a link for an image (like www.google.com/images/x.png), it works, but local file is not loading.
Folder Tree :
src
-app
-logincomponent
- logincomponent.html
- logincomponent.css
- New-Google-Logo.png
- logincomponent.ts
-homecomponent
- homecomponent.html
- homecomponent.css
- homecomponent.ts
Here the New-Google.png is referred inside logincomponent.html as given above.
Try 2 :
src
-app
-logincomponent
- logincomponent.html
- logincomponent.css
- Images
- New-Google-Logo.png
- logincomponent.ts
And referred in the html like :
<div>
<img src="./images/New-Google-Logo.png"/>
</div>
Both these didn't worked out.
If you are using angular-cli then all your static assets should be kept in assets folder. Then you should give path as
<div>
<img src="assets/images/New-Google-Logo.png"/>
</div>
When you serve the project all static assets needs to be served to client in order to display it on client. Angular cli build and bundle entire project in js files. To serve your static assets you can follow two ways
put all your static assets in assets folder which angular-cli serves with default .angular-cli.json
or you need to make entry of the static assets folder in .angular-cli.json file in array named as assets as my images folder is in static folder and static folder is at same hierarchy level of assets folder
"assets": [ "assets", "static/images" ]
change path to
<img src="assets/images/New-Google-Logo.png"/>
and add height and width
<img src="assets/images/New-Google-Logo.png" width="200" height="100">
If you create project using CLI you will have one assets folder just create one image folder inside it and paste your all images inside it of .png type then give
reference src="assets/images/AnyImage.png" inside your html it will load the images. Actually you pasted your images inside loginComponent folder. Try this it will work.
if you have references like this in your css files where images are referenced as below
.topmenu a:hover {
background:url('../images/topm_bg_right.gif') right top no-repeat;
color:#fff;
}
then you may have to add the image extension wild cards in the permit all list of your
WebSecurityConfig class as shown.. especially when you have bundled your app with both angular and spring boot together ng build and moved to the static folder
.antMatchers("/","/*.jpg","/*.png",
"/home","/assets/**",
"/polyfills.js",).permitAll()
Related
I am new to nextjs and trying to export my application as HTML after I run npm run export
When I use the <img /> tag some images do not get displayed on the webpage.
The question is, can anyone advise me on if I should load my images from the public folder or the asset folder because currently, I am loading from both folders.
Next.js serves images and other static files, under the public folder in the root directory. Files inside the public folder can then be referenced by your code starting from the base URL (/). This is further explained here
You don't need to load from an asset folder, create/store your images to your public folder and link them to the Image tag
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 am using Eclipse and Apache Tomcat, I have created a dynamic web project called SampleTest in the following path-:
G:\eclipse_workspace\SampleTest
Inside the SampleTest directory there are the following folders-:
.settings
build
imgs
src
WebContent
.classpath
.project
I have created the imgs folder from within Eclipse, the other folders where put there by the IDE.
The imgs folder will contain images that will be used by the application. I have a simple <img> tag in my index.html(it is located in the WebContent directory) as follows-:
<img alt="" src="../imgs/img.jpg" width="100" height="100">
As you can see I have specifically instructed the web server to "go up" a directory from WebContent so that it may find the imgs folder.
This doesn't work. When I run the project in Eclipse no image is displayed. But if I keep the imgs inside the WebContent folder and use /imgs/img.jpg instead everything works fine.
Why can't Tomcat just go up a directory ? Is it not allowed to ?
Why can't Tomcat just go up a directory ? Is it not allowed to ?
Correct, in that there is a security restriction designed to prevent attackers from copying your entire filesystem. But, that specific images folder isn't deployed instead everything is served relative to WebContent (making it the "root"), thus you can't go up a directory (that would be "above" the root and the imgs folder isn't part of the web deployment when you don't place it under WebContent).
I'm making a simple chat app with meteor. My HTML is:
<body>
<h1 align="center">tomomi-chat</h1>
<img src="original.gif">
<div class="container" align="center">
{{>entryfield}}
</div>
<br>
<div class="container">
{{>messages}}
</div>
The image won't load on the local server. As the app is extremely simplistic, there are no folders besides the '.meteor' folder in the directory. The .js, .css, and .html files are all in the app directory.
Even if I host the image and use an external link, the result in the same. Why is meteor blocking images from my app?
deployed: http://tomomi.meteor.com/
You should create a folder named public in your application root folder.
From the Meteor documentation:
/public
Files in /public are served to the client as-is. Use this to
store assets such as images. For example, if you have an image located
at /public/background.png, you can include it in your HTML with or in your CSS with background-image:
url(/background.png). Note that /public is not part of the image URL.
To elaborate on this, I would add images asset directory in the public folder like this and serve it via like this
images/transparent.jpg
Create a /public folder. put your images there.
Put assets in PROJECT/public folder and when you specify link in tag, just use "xyz.jpg".
Thats it! The URL does not include /public folder in it. It is very very taken correctly by meteor framework.
CORRECT -> "xyz.jpg"
INCORRECT -> "/public/xyz.jpg"
If you are Windows 10 user make public folder like that and call it in simple way