如何在 vue.js 中构建由 npm run build 命令动态获取的图像？答案

【问题标题】：How to build images which are dynamically sourced by npm run build command in vue.js?如何在 vue.js 中构建由 npm run build 命令动态获取的图像？
【发布时间】：2021-03-10 12:42:30
【问题描述】：

我在 src/assets/ 和我的一个组件中有一些图像我有这个

<img
          src="/src/assets/guna.jpg"
          alt="Guna"
          class="w-12 h-12 rounded-full"
        />

还有这个：

<img
          :src="`src/assets/${image}`"
          alt=""
          class="w-12 h-12 rounded-full"
        />

这里我有绑定图像并在循环中传递图像名称，并且我在循环的数据中有图像数组现在，当我运行 npm run build 时，只有 guna.jpg 的前一个图像是 buld 并被复制到 dist/assets/.......jpg 但不是绑定的图像 那我该如何解决呢？

【问题讨论】：

标签： vue.js npm

【解决方案1】：

你必须使用require

<img
      :src="require(`src/assets/${image}`)"
      alt=""
      class="w-12 h-12 rounded-full"
    />

【讨论】：

我可以看看你是如何循环图像的吗？
也许你需要把你的图片路径放到计算函数中，这样它就可以保持你的图片路径更新并在页面创建时渲染出来。