码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli 动态设置图片路径遇到的问题

时间:2017-09-06 14:34:55      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:遇到   exp   class   title   ports   color   set   port   assets   

<template>
<figure v-for="(item, index) in list">
    <div class="wrap">
        <img class="image" v-bind:src="item.img" />
    </div>
</figure>
</template>
<srript>
var swiptData = [
    {
        title: ‘1‘,
        link: ‘//baidu.com‘,
        img: ‘/static/assets/images/explorations1.jpg‘
    },
    {
        title: ‘2‘,
        link: ‘//163.com‘,
        img: ‘/static/assets/images/explorations2.jpg‘
    },
    {
        title: ‘3‘,
        link: ‘//sports.sina.com.cn‘,
        img: ‘/static/assets/images/explorations3.jpg‘
    }
];
export default {
        name: ‘Banner‘,
        data(){
            list: swipeData
        }
}
</script>

问题:图片一直显示 404 错误,vue-cli无法解析路径,不能让图片打包到 dist 目录 

解决:

如果你是vue-cli初始化的项目,解决的办法:
第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static/a.png
第二步,js中使用/static/a.png去引用就行了。

vue-cli 动态设置图片路径遇到的问题

标签:遇到   exp   class   title   ports   color   set   port   assets   

原文地址:http://www.cnblogs.com/flying--pig/p/7484084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!