Question

我将一些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加载功能遍历它们的直观方法

有没有办法从Vue中的json文件提供的网址加载图片？

0 个答案: