Methods for creating an array of images in Angular 2

I'm attempting to display an image from an array of objects. Below is the code I have written for this purpose:

product: any[] = [{
    id: 121, name: "iphone", url: 'https://www.gstatic.com/webp/gallery3/1.png'
}] //I also tried using a local file path

Here is how I am trying to display the image:

<div *ngFor="let list of product">
    {{list.url}}
</div>

However, instead of displaying the image, it only shows the string. Can someone please advise on how to properly call an image that is defined in an array?

angulartypescript

Answer №1

To display images in your view during iteration, you must use the img tag.

Give this a try -

<div *ngFor="let item of items">
    <img [src]='item.imageUrl' />
</div>

See it in action

Answer №2

Embed a URL within the <img> tag using source binding:

<div *ngFor="let item of products">
    <img [src]='item.imageUrl' [alt]='item.name'/>
</div>

Answer №3

Give this approach a shot:

<div *ngFor="let item of products">
    <img [src]='item.imgUrl'/>
</div

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to save information in the localStorage within Angular 5

Hey there internet folks, I've been working on developing an Angular 5 application with Mongoose as the back-end. My goal is to save data (specifically an authentication token) in localStorage so that users can retain their auth token even after clos ...

node.jsangularsessionmongooselocal-storage

Dealing with Unexpected Timeout Errors and Memory Leaks in Express/Typescript Using Jest, Supertest, and TypeORM

Currently, I am in the process of writing unit tests for an express API. Each test suite initiates a fresh instance of an express server before running the tests. Individually, each test suite runs smoothly without any problems. However, when executed tog ...

typescriptexpressjestjssupertest

Why am I not achieving the desired code coverage in Jest while testing Angular?

I've recently developed a small project to monitor coverage results, but I'm encountering some unexpected issues. It seems like there's a configuration mistake on my end, but I'm struggling to identify what adjustments need to be made t ...

angularunit-testingjestjstest-coverage

Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

I would like to access this service: https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY I am interested in extracting only two pieces of data: "location" : { " ...

jsonangulargoogle-mapstypescriptgoogle-api

Setting default values for class members in Typescript is important for ensuring consistent behavior and

My model is pretty straightforward: export class Profile extends ServerData { name: string; email: string; age: number; } Whenever I make a server call using Angular 4's $http, I consistently receive this response: { name: string; email: ...

angulartypescript

Which offers a more efficient approach: implementing functionalities within subscribe or in a custom operator with RxJS?

Within my angular application, I frequently utilize a pattern like this: this._store .root .pipe( ..., mergeMap(() => this._httpClient.get<IEvent[]>(`${this.ROUTE}/user/${id}`)) ) .subscribe((events: IEvent[]) => ...

angularrxjs

How can one go about constructing abstract models using Prisma ORM?

Among my various prisma models, there are common fields such as audit fields like created_at and updated_at. model User { id Int @id @default(autoincrement()) created_at DateTime @default(now()) updated_at DateTime @updatedAt email ...

javascriptnode.jstypescriptormprisma

Create a flexible string for refining a REST request

I am currently working on constructing a dynamic string and I've encountered an issue, so I humbly seek assistance from the community. I have a string for creating a rest call filter, but I am struggling with the use of and's This query only fu ...

reactjsstringtypescriptrestdynamic-programming

Unleash the potential of a never-ending expansion for grid cells on Canvas

ts: templateStyle = { display: 'grid', 'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)', 'grid-template-rows': '150px auto auto', 'grid-gap ...

htmlcssangulartypescriptcanvas

Check if a form field's value is lower than another in Angular reactive forms

In the form, I have a field called LDC along with two other fields named limit1 and limit2. My goal is to display an error message if either limit1 or limit2 exceeds the value of LDC, or if the sum of limit1 and limit2 surpasses LDC. I attempted to creat ...

typescriptangular8

Angular Universal is encountering an issue locating the reference to 'expect'

I am in need of assistance. After running npm run build:ssr && npm run serve:ssr, I encountered the following errors: TS2304: Cannot find name 'expect'. TS2304: Cannot find name 'it'. TS2304: Cannot find name 'fail'. npm ERR ...

node.jsangularnpmwebpack

How can you display a div element when a checkbox is selected?

My goal is to dynamically display an input element if a checkbox is checked using ng-show. When a user does not have a telephone number, they can check the checkbox and then an input field should appear for them to enter their mailing address. Unfortunatel ...

javascriptangular

What is the method for setting autofocus to the first input element within a loop?

I am currently working on a loop to display inputs, and I would like to be able to add focus to the first input element when it is clicked. Does anyone have any suggestions on how I can select that first element and set autofocus on it? ...

javascriptangulartypescriptfocus

Programmatically initiate form submission in Angular with dynamic status and classes

Presented in a sequential manner, I have various questions within a form that can be navigated forwards and backwards by the user. To make this process smoother, I have incorporated the functionality to use the left and right arrow keys with the help of on ...

angular

What are the solutions for handling undefined data within the scope of Typescript?

I am encountering an issue with my ngOnInit() method. The method fills a data list at the beginning and contains two different logic branches depending on whether there is a query param present (navigating back to the page) or it's the first opening o ...

angulartypescript

Exploring MongoDB files easily using Angular

I am currently working on implementing a user search feature using Angular to query users from a MongoDB collection. The function on the server side is already operational and functioning correctly with Postman. However, I encountered an error on the clien ...

node.jsangularmongodb

In Angular 5, you cannot assign type 'any[]' to type 'typeof User'

After extracting data from the JSON file, I encountered a typo error message stating: Type 'any[]' is not assignable to type 'typeof User'. Here is my code in app.component.ts: import { Component, OnInit } from '@angular/core&a ...

angulartypescript

Enhancing Forms with Redux and Styled Components

I'm currently working on developing a reusable component that involves using a redux-form <Field /> and styling it with styled-components within the component. The issue I'm facing is that none of the styles are being applied. Here is my ...

javascriptreactjstypescriptredux-formstyled-components

Issues Arise with Nativescript Layout When Content is Not in View on iOS

This problem has been giving me a hard time for the past few days. I hope someone can help me figure out what's wrong. I have a view that shows a nested list inside a main list. The main list contains header details. Everything looks fine when the in ...

iosangularscrollviewnativescript

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position