我将一些JSON对象放入一个组件中,在我的for循环中,我有指向我的本地图像的对象url。
每当我与:src =“ item.img”一起使用时,图像均不会加载。当我检查元素时,它确实是我通过JSON对象提供的路径,但是仍然找不到。
但是,当我手动放置img路径url时,图像加载正常,但是路径和名称似乎不同(/img/git.ee1369e9.png)。 Vue正在做一些后台处理并更改名称。
我的../assets/img/git.png的位置
data / techData.json
{
"git": {
"name": "Git",
"url": "https://git-scm.com/",
"img": "../assets/img/git.png",
"description": "Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.",
"category": "Project Management"
}
}
components / AppWebList.vue
<div v-for="item in TechData" :key="item.name">
<h1>{{item.name}}</h1>
<img :src="item.img">
</div>
...
<script>
import TechData from "../data/techData.json";
export default {
name: "AppWebList",
data() {
return {
TechData
};
}
};
</script>
我需要了解一种导入JSON文件并使用img srcs加载功能遍历它们的直观方法