使用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

解决方案：

使用require分析img网址。

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