Vue~如何对img标签的src属性进行绑定

作者: 爱上别的吧 | 来源:发表于2019-10-17 15:45 被阅读0次

Vue~如何对img标签的src属性进行绑定
Vue v-bind 动态绑定属性、class、style
前端数据请求方式
vue
vue学习笔记（二）属性绑定，鼠标事件，事件修饰符，按键修饰符
绑定属性
v-bind之动态绑定
HTML图像
vue2仿写eleme小结
Vue中img的src属性动态绑定

话不多说，直接上代码

<template>
  <div>
    <img :src="icon" alt="">
  </div>
</template>

<script>
export default {
  name: 'my',
  data () {
    return {
     //  当图片不在static中时，比如在assets中
      icon: require('../assets/icon.png'),
     //  当图片在static中时
      icon: '../static/icon.png',
     //  当图片为外部链接时
      icon: 'https://www.w3school.com.cn/i/eg_tulip.jpg',
    }
  },
</script>

Vue~如何对img标签的src属性进行绑定
话不多说，直接上代码
Vue v-bind 动态绑定属性、class、style
data数据一、动态绑定属性1、 img标签的src属性 imageUrl 是图片的动态地址语法糖写法可...
前端数据请求方式
一。几种方式 1、 link标签的href属性2、 script标签的src属性3、 img标签的src属性4、 ...
vue
img标签的 src属性使用变量
vue学习笔记（二）属性绑定，鼠标事件，事件修饰符，按键修饰符
vue中属性绑定 vue中事件绑定在标签方法名前加 @ 进行事件绑定![a标签click成功绑定add方法] 事...
绑定属性
v-bind指令介绍动态绑定属性：比如a元素的href属性，img元素的src属性作用：动态绑定属性缩写：：...
v-bind之动态绑定
1. v-bind 绑定基本属性动态绑定img的src属性动态绑定a的href属性等等语法糖写法（简写）：...
HTML图像
HTML图像-图像标签和源属性(Src) 在HTML中，图像由标签定义。是空标签，意...
vue2仿写eleme小结
Impressions vue中的常用缩写属性绑定:src === v-bind:src 事件绑定@click ...
Vue中img的src属性动态绑定
最近在使用Vue模仿网易云音乐的App。遇到了一个关于img的src属性动态绑定，图片不显示的问题。我会在这里...