我有大约1000张图片的webpack +打字稿项目。我也有一个描述此图像的文件，如下所示：
[{
code: 'imageACode',
alt: 'imageAAlt',
source: './pathToA.jpg'
}]
我得到的B，C，D和其他997张图像的代码相同。在客户端的一天结束时，应在下面生成html：
<img src="/static/pathToA.jpg" alt="imageAAlt"/>
而且，我还可以使用imageACodehtml代码替换该图片（无论如何）。
确定，最简单的方法是：
import a from "../assets/images/pathToA.jpg"
{
code: 'imageACode',
alt: 'imageAAlt',
source: a
}
有没有像这样更优雅的方式：
{
code: 'imageACode',
alt: 'imageAAlt',
source: import '../assets/images/pathToA.jpg'
}
或者可能是某种webpack应该运行的forEach。
如果您有很多资产，并且不想手动导入，则可以使用require.context。
这是可能适合您的情况的简单示例：
const images = require.context('../assets/images/', false, /\.jpg$/)
const descriptions = images.keys().map(images).map(source => ({
code: 'code',
alt: 'alt',
source
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句