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

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'：

<img :src="imgLocation"></img>
<img :src="require(imgLocation)"></img>

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

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

错误：找不到模块“@/assets/my_image.jpg” 在 webpackEmptyContext (eval at ./src/components sync recursive (app.js:6618), :2:10)

知道我在这里做错了什么吗？

Answer 1

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