Vue里面用v-bind绑定一个src,里面能否用相对路径呢 5C

这是我在网上学习的项目,老师用的都是网址一样的绝对路径。写在下面要轮播的imgUrl里,这样没有问题,但是如果我用现在的相对路径就不行了,图片显示不出来,从电脑上本地开始的绝对路径也不行,路径直接出现在html上面了,如果不用v-bind就还可以,请问有解决的办法吗

<template>
    <div class="warpper">
        <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" src="F:\html5\mukeVUE\classic APP\Travel\travel\src\assets\swiper2.jpg"></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    data: function(){
        return {
            swiperOption: {
                pagination:'.swiper-pagination'
            },
            swiperList: [{
                id: '0001',
                imgUrl: '../../../assets/swiper1.jpg'
            }, {
                id: '0002',
                imgUrl: '../../../assets/swiper2.jpg'
              }]
        }
    }
}

图片说明

4个回答

典型问题,如果在vue的data里写图片的相对路径的话,请使用require()。示例:

imgUrl: require('../../../assets/swiper1.jpg')

qq_34976490
qq_34976490 你是对的!!太棒了
3 个月之前 回复

因为v-bind把后面的值作为了一个变量吧,你先定义一个变量,然后把你的地址赋值给变量,然后v-bind这个变量试试

<img :src="'/static/img/' + fileName">  

src里面的是图片地址 这个地址必须是你浏览器能访问到的 你用这个地址在浏览器新建一个标签测试一下

src里面的是图片地址是你浏览器能访问到的吗

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问