Question

我有一个webpack +打字稿项目，它有大约1000张图像。我也有一个描述此图像的文件，如下所示：

 <ng-container *ngIf="(chat$ | async) as chat">
    <ng-container *ngIf="(auth.user$ | async) as user">
      .
      .
      <div class="card-body msg_card_body" id="card-body" #cardBody>
      .
      .
      .
      </div>
  </ng-container>
</ng-container>

我得到的B，C，D和其他997张图像的代码相同。在客户端的一天结束时，应在下面生成html：

[{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: './pathToA.jpg'
}]

而且我还使用<img src="/static/pathToA.jpg" alt="imageAAlt"/>来将一些html代码替换为该图像（无论如何）。

确定，最简单的方法是：

imageACode

有没有更优雅的方式呢？

import a from "../assets/images/pathToA.jpg"

{
  code: 'imageACode',
  alt: 'imageAAlt',
  source: a
}

或者可能是webpack应该运行的forEach。

Answer 1

如果您有很多资产，并且不想手动导入，则可以使用require.context。

这是适用于您的情况的简单示例：

const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
    code: 'code',
    alt: 'alt',
    source
})

webpack在构建时动态导入文件

1 个答案: