使用 v-bind 设置 img.src 后，webpack 将不会翻译链接

Question

我正在使用 vue-cli-2.9.3 来创建 webpack 模板，而无需更改任何默认设置。

当我尝试链接到组件中的某些 img 时，例如

<template>
  <div>
      <img src="../assets/p1.jpeg">
      <img src="../assets/p2.jpeg">
  </div>
</template>

此img将被翻译成<img src="/static/img/p1.3b03bfb.jpeg">，并且工作正常。但是我想用 v-bind 设置 src：

<template>
  <div>
      <img :src="`../assets/p${number1}.jpeg`">
      <img :src="`../assets/p${number2}.jpeg`">
  </div>
</template>

当然，number1等于 1，number2等于 2。

此img将翻译成 <img src="../assets/p2.jpeg"> .因此，浏览器无法在最终项目中找到资源。如何解决这个问题？

Answer 1

解决方案：

使用"需要"来分析 IMG URL。

<img :src=“require(../assets/p${number1}.jpeg)”>