Vue中img动态绑定图片的地址

在vue中绑定图片的地址需要用v-bind方式绑定

<img :src="imgUrl" /><script >import routePath from "../router/routePath"export default {data() {return {imgUrl: "" //图片地址，地址的写法看下面图片的书写方式}}}
</script>

图片的地址书写方式

网络图片地址写法：正常的字符串地址

data() {return {imgUrl: 'https://img.zmtc.com/2019/0602/20190602035251943.jpg'}
}

本地图片地址写法：需要通过require()引入，否则无法生效

data() {return {imgUrl: require('../assets/logo.png')}
}

Vue中img动态绑定图片的地址相关推荐

vue中设置背景图片的方式
vue中设置背景图片直接设置背景图片动态设置背景图片直接设置背景图片 1.在data中声明背景图片相关配置 export default {data () {return {// 顶部导航背景图 ...
vue中使用 svg图片
vue中使用 svg图片 1.assets 中新建 icons 文件夹:icons文件夹下 svg 是svg图片,index.js,svgo.yml 文件如下: a. index.js import ...
在vue中设置背景图片
在vue中设置背景图片在App.vue中将样式中默认的margin-top 改为0,使得页面顶部不留白 #app {font-family: 'Avenir', Helvetica, Arial, ...
前端Vue中获取本机ip地址
前端Vue中获取本机ip地址 1.打开谷歌浏览器,地址栏输入chrome://flags,进入. 2.搜索Anonymize local IPs exposed by WebRTC,将其设置为Disa ...
vue中如何获取当前路由地址
vue获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用.如 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
vue中使用svg图片
1.安装依赖包 svg-sprite-loader npm install svg-sprite-loader --save-dev 2.配置svg图片使用svg-sprite-loader来编译-- ...
Vue中添加背景图片
往一个div中添加背景图片 bgImg:为图片地址希望能帮到你!!
自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...

Vue中img动态绑定图片的地址

图片的地址书写方式

Vue中img动态绑定图片的地址相关推荐

最新文章

热门文章