在Vue组件中渲染本地图像，图像位置存储在data属性中

Question

我正在尝试从Vue项目中的资产文件夹中渲染图像。当我使用以下任何一种方法对其进行硬编码时，就会显示该图像：

<img src="../assets/my_image.jpg"></img>
<img :src="require('../assets/my_image.jpg')"></img>
<img src="@/assets/my_image.jpg"></img>
<img :src="require('@/assets/my_image.jpg')"></img>

但是我无法渲染图像，我将该位置存储在名为imgLocation或imgLocation='../assets/my_image.jpg'的数据属性中：

imgLocation='@/assets/my_image.jpg'

第一个元素不显示图像，也不向控制台记录任何内容。第二个元素在控制台中显示以下错误：

  

[Vue警告]：渲染错误：“错误：找不到模块'@ / assets / my_image.jpg'”

     

错误：找不到模块'@ / assets / my_image.jpg'       在webpackEmptyContext处（在./src/components同步递归（app.js：6618），：2：10处评估）

知道我在做什么错吗？

Answer 1

在第二种情况下，在运行时评估绑定。您希望在构建时解析路径。因此，您可能应该在组件的imgLocation: require('../assets/my_image.jpg')部分执行imgLocation: require('@/assets/my_image.jpg')或data。