关于vue中img标签的src属性动态绑定本地图片路径无效的问题

最新推荐文章于 2023-09-18 09:45:15 发布

LIN荒年

最新推荐文章于 2023-09-18 09:45:15 发布

阅读量2.5k

点赞数 5

文章标签： vue.js 前端 javascript html5

本文链接：https://blog.csdn.net/weixin_46545863/article/details/125502023

版权

前提：通过v-for遍历data数据里的给img标签的src属性赋值

我一开始的写法：

<template>
    <div v-for="(item,index) in contentList " :key="index">
        <img :src="item.img" alt="" />
    </div>
</template>

<script>
    const contentList = [
            {
                id: '1',
                img: '@/assets/marketing/emailGuide1.png',
            },
            {
                id: '2',
                img: '@/assets/marketing/emailGuide1.png',
            },
            {
                id: '3',
                img: '@/assets/marketing/emailGuide1.png',
            },
            {
                id: '4',
                img: '@/assets/marketing/emailGuide1.png',
            },
        ];
</script>

结果运行时图片加载不出来

后面我找了下原因，个人觉得可能是在项目打包运行时，只是把相应的图片路径赋给img标签的src属性，并没有对路径进行转化，导致在项目运行时找不到相应路径的资源。

解决方法：

在相应的文件中通过import的方式把图片引入进来

<template>
    <div v-for="(item,index) in contentList " :key="index">
        <img :src="item.img" alt="" />
    </div>
</template>

<script>
    
    import step1Img from '@/assets/marketing/emailGuide1.png';
    import step2Img from '@/assets/marketing/emailGuide2.png';
    import step3Img from '@/assets/marketing/emailGuide3.png';
    import step4Img from '@/assets/marketing/emailGuide4.png';

    const contentList = [
            {
                id: '1',
                img: step1Img ,
            },
            {
                id: '2',
                img: step2Img ,
            },
            {
                id: '3',
                img: step3Img ,
            },
            {
                id: '4',
                img: step4Img ,
            },
        ];
</script>