I am building an angular app and in one of the components i am trying to load an image, but it is throwing a 404 not found. I guess I am not giving my path correctly. Could someone please help me with it ?
my screenshot for the component structure and html code with it
My html page with the error:
copy your images into assets folder. Angular can only statics files like images from assets folder and then
<img src="assets\img\elliot.jpg">
Related
please do check the image. it also consists of the error code and the folder where it shows that the file is not found
Make a folder named media in project folder and save your images at that and in src of write media/imagename try this
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 know this is a very basic question but I am struggling a low for this problem. This is my project hierarchy and I am having an href on the home button which would direct to the contact-us.html page in my html folder but I am not getting the path which I should write. It always shows error 404.
I have tried
/ZingyBeesTest/html/contact-us.html
/ZingyBeesTest/WEB-INF/html/contact-us.html
/html/contact-us.html
and many more. What should I write? I am facing the same problem with images. That is why I have pasted all the images in the same directory as my index.html.
EDIT :
One of my mistakes was that the web.xml and servlet file must be present in the WEB-INF folder and not in the Web Content folder. But the links still do not work.
I am having a hard time rendering/ successfully hosting images on Github.
My github repository has the following link tree structure: michaelamay/projects/post.html
and there is an image folder with the structure: michaelamay/projects/images/
In my code i add that to the src in 3 different ways, none of which are working (see image below in line 24,25,28, and 31)
This is how the rendering looks. Just a picture icon shows.
Here is the main page of the repository.
Inside the images folder.
Does anyone have any idea why that is happening? I insert an image from a website and it renders fine but not when called locally from the folders its located.
Given that the file path of the post.html file is michaelamay/projects/_layouts/post.html. If you are trying to access michaelamay/projects/images/img_forest.jpg, the path should be given as:
<img src="../images/img_forest.jpg">
This is because the 'images' folder is not under either 'projects/_layouts' or the root of the project structure.
For more information, you can check this link.
I am working on an angular webpage. When I am using ng start, all the images on my home pages are successfully being displayed and visible. I build my angular project again with ng build --prod. I know that this --prod flag minimizes the filesize but when I deployed to the IIS web server, I don't see any of the images on the home page.
Even with the minimize file, I can still see the image with the ng start but not with IIS.
In my HTML file, I reference the image with code like this
All of my images are located inside a folder call assets/img. The following shows my IIS folder content.
Have anyone else have this issue? Any help is greatly appreciated.
The minimized files works with Angular 6 when start with the command line ng start. When I copied the files to the IIS folder, there are no display images. I am wondering if there is something I need to set on IIS. I checked and the Static Content is set under Internet Information Services. I also copied and pasted all the images in the folder and each of the subfolder but still no images are displayed.
Thanks