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

Question

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

<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 warn]: Error in render: "Error: Cannot find module '@/assets/my_image.jpg'"

Error: Cannot find module '@/assets/my_image.jpg' at webpackEmptyContext (eval at ./src/components sync recursive (app.js:6618), :2:10)

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

Answer 1

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