美文网首页
vue 关于图片路径的问题

vue 关于图片路径的问题

作者: Cherry丶小丸子 | 来源:发表于2020-02-27 15:19 被阅读0次

图片放在assets文件夹下面,在html模块或者css中引入图片的时候用相对路径

<img src="../../assets/img/policeImg/tt.png">
background:url("../images/login.png")

图片放在assets文件夹下面,路径绑定在data中

<div>
    <img :src="img">
</div>
<script>
    export default {
        data () {
            return {
                img: '../../assets/img/policeImg/tt.png' //这样图片会显示不出来
                img: require('../../assets/img/policeImg/tt.png') //正确写法
                imgsrc1: 'http://www.baidu/banner1.jpg' //如果图片不是本地静态资源,就不用require
            }
        }
    }
</script>
或者
<div>
    <img :src="img">
</div>
<script>
    import img from '../../assets/img/policeImg/tt.png'
    export default {
        data () {
            return {
                img: img
            }
        }
    }
</script>

图片放在static文件夹下面,在html、css、js中直接引入,我们会发现图片都可以正常展示

相关文章

  • vue 关于图片路径的问题

    图片放在assets文件夹下面,在html模块或者css中引入图片的时候用相对路径 图片放在assets文件夹下面...

  • Vuejs图片编译后失败的问题

    问题: (vue.js)vue-cli 打包之后图片引用路径;描述:这是我的组件的路径;./src/compone...

  • vue的图片路径问题

    在学习vue的过程中,我发现一个问题如下:引用图片的时候,用以下方式完全没问题: 但是,将图片路径写在js里面就不...

  • 关于Vue 图片img路径赋值问题

    如果img的src想动态指向,可以通过: data () {return {img: 'path/to/your/...

  • vue js修改图片地址

    当我们在Vue项目中引用图片时,关于图片路径有以下几种情形: 使用一 当我们需要在js代码里面写图片路径的时候,如...

  • vue中图片路径问题

    vue中图片引用可分为两种: 一、直接应用:这种的话直接引入本地文件中的图片就可以 二、动态添加 1、本地文件:需...

  • 关于图片路径src的问题小结

    在vue项目中关于加载图片路径的问题:首先我们要分析一点,项目中前端图片的来源分为几种渠道,其次是我们前端拿到的是...

  • 总结

    1,图片路径引用 问题:vue项目上线后一般放在子目录里面 使用常规的图片路径引用的方式在本地运行是没有问题的 ...

  • vue 动态加载图片路径

    在用vue-cli脚手架生成的vue项目开发中,动态加载图片本地运行没有问题,但是打包后图片无法显示,图片路径40...

  • vue→显示本地图片

    1、backgroundImage路径问题(vue里面放背景图片) 来源:https://blog.csdn.ne...

网友评论

      本文标题:vue 关于图片路径的问题

      本文链接:https://www.haomeiwen.com/subject/ejzthhtx.html