Javascript 如何在Vue.js中绑定v-for中的图像？

我在互联网上尝试了所有的解决方案，但无法以任何方式将图片打印到屏幕上。我是不是犯了一个很简单的错误？文件名和文件夹正确

在给出路径时，我希望通过从数据中提供sub club名称，从相关文件夹中以SubClub名称注册图片。例如Art.jpg。如果你能帮忙，我将非常高兴

开始
完成
这是你的结果！
分会
分数
想加入吗？
{{分俱乐部分数}}
{{分俱乐部分数}}
参加

导出默认值{
名称：“结果”，
数据（）{
返回{
分俱乐部：[
{ 
id:1，
课程名称：“瑜伽”，
得分：70分，
},
{  
id:3，
分俱乐部名称：“小说”，
得分：60分，
},
{  
id:4，
子俱乐部名称：“钢琴”，
得分：45分，
},
]
}
},
方法：{
goToHomePage（）{
这是。$router.push（“/”）；
}
}
}

您必须使用require。像这样：

<img class="image" :src="require('@/assets/sub-clubs-images/'+ subclub.subclubName+'.jpg')" width="75">

仅使用“@/assets/”无法获取根目录url。使用require（）包装字符串，并从subclub.subclubName变量中删除引号 像

您还可以使用ES6模板文本将字符串与变量连接起来，如下所示

<img class="image" :src="require(`@/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">

删除

:src

属性中

'subclub.subclubName'

周围的引号，即

:src=“@/assets/sub clubs images/'+subclub.subclubName+'.jpg'”

我像这样运行了

，但还是不起作用。控制台会发出如下警告：[Vue warn]：属性或方法“subclubName”未在实例上定义，而是在渲染期间引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。该警告可能与您的复选框

v-model=“subclubName”

有关。您没有任何与此相关的数据属性name@Phil这是否会导致图像上传出现问题？我该如何解决这个问题？什么“图像上传”？我不知道你的意思，图像名称变量不应该包含在引号中，它应该是'subclub.subclubName'=>subclub.subclubName

<img class="image" :src="require(`@/assets/sub-clubs-images/${subclub.subclubName}.jpg`)" width="75">