When I upload a product from Angular side, It Post the product with imagepath, and the image is getting stored in the NestJs folder also, but I can not display product with it's image. The product is displaying at frontend but without it's image that is referenced and saved at the backend.
Anguar FrontEnd Code .ts
export class BooksComponent implements OnInit {
BookForm = new FormGroup({
_id: new FormControl(''),
name: new FormControl(''),
author: new FormControl(''),
price: new FormControl(''),
genres_name: new FormControl(''),
coverimage: new FormControl(''),
});
results?: Book[] = [];
searchedText: string = '';
constructor(
private readonly apiService: ApiService,
private router: Router
) {}
ngOnInit() {
this.apiService.getallbooks().subscribe((data) => {
this.results = data;
console.log(this.results);
});
}
Frontend html code.I'm getting all the information but not the image, here I'm providing src in img tag to display images
<div class="grid" *ngFor="let result of results">
<div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
This is the information of the Product that is coming from the backend
And when I try like this src="{{result.coverimage}}" or [src]="result.coverimage" I got error localhost:4200/assets/imagename not found(404). well that is obvoius!. because there is not such path, 4200 is for Angular. but I'm uploading the images at the backend assets folder which is located at localhost:3000/assets/, and we always upload files to backend for dynamic approach from database
In your highlighted part of your post you ask how to display the image, i.e you suspect the problem is in the frontend. However there is a missing part from the provided context. In the line where the html magic happens (The img tag src attribute).
There you are string interpolating a property called coverimage under the results object. We do not see what is inside the coverimage from your backend response in the frontend screenshot. If it is an id of a document then it will not be parsed correctly. The src attribute accepts:
APNG, AVIF, GIF, JPEG, PNG, SVG, and WebP. Or base64 (which seems not the case here).
When you have the image with one of the acceptable supported formats as stated in MDN correct you can map the property to the src attribute either via
1- string interpolation:
<img src="{{imagePath}}" />
2- property binding:
<img [src]="imagePath" />
The second way is more popular, but both work fine.
PS: it is a best practice and accessibility recommended to populate the alt="" property
If you are struggling to display the images coming from server, like I was, or you are struggling with the data that is coming NestJs. Then this might work for you as it worked for me.
So in my case I had a list of books and each book has path for its image. I was using ngFor and set the image src with the path. That is the right way. But the images were not visible and Network was showing images as text/html type. The actual issue here was not the type,the actual issue was in my URL.I had a folder in NestJs server by the name of assets,that is preset at root, and I had set the path for the images(in NestJs file upload code), like this ./assets/. That is also the correct way to set the destination folder.I was able to see the images at browser like this http://localhost:3000/imagename.png,and that means my server configured to server/serve my images over root URL that's why I can access them http://localhost:3000/imagename.png. But my api was returning images in a format that contains ./assets/ in the URL.
So with the following code
<div *ngIf="result.coverimage">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
</div>
I am assuming that I'm hitting the Url like this http:localhost:3000/imagename.png. But actually Angular was seeing the URL like this http:localhost:3000/./assets/imagename.png. And this is note the correct URL Format. Urls don't work with . or ,.Also becasue my server is configured at root, this urlhttp;//localhost:3000/assets/imagename.png is also wrong.And root means that, whatever the thing is set at root, that is directly access able after your server's port number. Example http://localhost:YourServerPortNumber/TheThing_Set_at_Root.
So the solution for this issue is the following
src="http://localhost:3000/{{
result.coverimage.replace('./assets/', '')
}}"
With above .replace('./assets/', '') we are removing the ./assets/ and repalcing it with '' empty space. So now URL is in this formathttp://localhost:3000/imagename.png.
I would like a HTML to get an image file name as a parameter from another page and display that image. I only know a bit of HTML. I don't know PHP etc.
I have a website which has several HTML pages. I want to write an "image container" page which will be called from other pages. The other pages will pass it a bitmap file name and the container page will display that image.
Ideally the container page should be getting few other parameter like the width and height of the image.
In showimage.html:
Instead of this:
<img src="bitmaps/test.jpg" height="200">
Have something like this:
<img src="{parameter 1}" height="{parameter 2}">
And the calling page will call showimage.html with "bitmaps/test.jpg" and "200".
I am trying to get an image from an external source in Play Framework. When working with just the string this works fine, but I need to pass to the controller an Integer also but this always give me a not applicable to String error. I think this is because of the img src html tag I am using. item.Myjob is the string and works fine by itself, item.MyItem is the integer
<img src ="#routes.ImagesController.getImage(item.MyJob,Item.MyItem)"/>
My plan is to pass the parameters to the image controller from the parameters I have to make up the path and the image file name and then return the image. Or any other advice on how this can be achieved. Thanks
Why you want to do this?
Why not pass a list of items with their image ids, and a for loop; if you want to get the list of items and their images? Something like:
//In controller
case class Item (name: String, picId: Int, whateverElse: Any)
//In your views
#(items: List[Item])
#for(item <- items){
#item.name
<img src="whateverPath/#item.picId">
}
or...
In a case you have a small application and unique items, you could simply make the image ids the same as items' names; so you don't need to look for it.
How can I display images from a JSON sub-array which is received via my API?
I can display the title, the price and the description but not the actual image.
Can anyone give me a tip?
My XML:
My JSON structure:
If you just need to display one image, use a dataTransform attribute where you also have the dataCollection attribute (see https://appcelerator.github.io/appc-docs/latest/#!/guide/Alloy_Data_Binding-section-36739592_AlloyDataBinding-Collection-ViewBinding) to select/compose the image URI from the JSON and then use the property in <ImageView image="{myImage}" />
You need to loop through the image array and create the ImageView inside JS. To display the images you can use a ScrollableView (http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ScrollableView) and add the images as a view.
I am trying to get an image from this website using Ruby.
https://steamcommunity.com/market/listings/730/M4A1-S%20%7C%20Cyrex%20(Minimal%20Wear)
So far, I have successful code to get the name of the item listed on the website:
html = Nokogiri::HTML.parse(open('https://steamcommunity.com/market/listings/730/'+url2))
title = html.css('title').text
titles = title.sub(/^Steam Community Market :: Listings for / , '')
Which results in "M4A1-S | Cyrex (Minimal Wear)"
(The "url2" comes from an input box on the html page that I made)
The image on the Steam Website has a class of "market_listing_largeimage".
Is there a way to also use Nokogiri to get the image src so that I can then input it into Html?
The image does not have that class; the div that the image is wrapped in does. That said,
html.at_css('.market_listing_largeimage img')['src']