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

时间:2019-05-25 08:01:54

标签: json vue.js

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

0 个答案:

没有答案