主页 / 问题 / 922804
Accepted
MegaRoks
Asked:2020-12-19 15:56:17 +0800 CST2020-12-19 15:56:17 +0800 CST

以角度循环显示图像

  • 772

我使用angular并且主页上有一张图片。一切都好。但问题是其中会有 20 个，所以我不应该放 20 个类landing__about-body。我明白循环需要什么，但我不明白如何从页面中获取图像assets\images\landing并显示在页面上。如何实施？

<div class="landing__about">
    <div class="landing__about-title">About</div>
        <div class="landing__about-body">
            <div class="landing__about-img">
                <img class="landing__about-img" src="landing/about.png"/>
            </div>
        </div>
    </div>
</div>
angular

1 个回答

  1. Best Answer

    您可以使用 webpack 上下文，它是从特定表达式创建的。一般来说require.context，这是 webpack 本身的一个特性，有人可能会说，这是一种通用的代码分块形式。

    在要获取所有图像文件名称的组件中，执行以下操作：

    // `require.context` нету в определениях типов
declare const require: any;

function getPaths(req) {
    return req.keys().map(req);
}

const images = getPaths(require.context('../абсолютный-путь-к-папке-assets-images-landing', false, /\.(png|jpe?g)$/));

class Component {
    public images: string[] = images;
}

    在模板中，您将拥有一个包含可用图像文件名的数组：

    <div class="landing__about-img" *ngFor="let image of images">
    <img class="landing__about-img" [src]="'/assets/images/landing/' + image">
</div>
    • 2

相关问题