如何在Angular 2中声明图像数组

Question

我正在尝试从对象数组中调用图像，为此，我在下面的代码中编写了

export function getParamsFromUrl(url) {
    url = decodeURI(url);
    if (typeof url === 'string') {
        let params = url.split('?');
        let eachParamsArr = params[1].split('&');
        let obj = {};
        if (eachParamsArr && eachParamsArr.length) {
            eachParamsArr.map(param => {
                let keyValuePair = param.split('=')
                let key = keyValuePair[0];
                let value = keyValuePair[1];
                obj[key] = value;
            })
        }
        return obj;
    }
}

并按如下所示调用此图片

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

，但不显示图像，而仅显示字符串。有人可以让我知道如何调用数组

中定义的图像吗

Answer 1

您需要使用img标签在迭代过程中将图像渲染到视图部分。

尝试一下-

<div *ngFor="let list of product">
    <img [src]='list.url' />
</div>

Working example

Answer 2

在带有源绑定的<img>标记中放入URL：

<div *ngFor="let list of product">
    <img [src]='list.url' [alt]='list.name'/>
</div>

Answer 3

您可以尝试此解决方案

<div *ngFor="let list of product">
    <img [src]='list.url'/>
</div