zoukankan      html  css  js  c++  java
  • vue中引入图片的几种方式

    vue的三种图片引入方式

    • 首先给图片地址绑定变量:
    
    <template>
       <img :src="imgUrl">
    </template>
    
    • 在script中设置变量:
    
    //方法1:直接将图片引入为模块
    require imgUrl from "../assets/test.png"
    
    //方法2:把imgUrl放在数据中
    data() {
        return {
            imgUrl:require("../assets/test.png")
         }
    }
    补充方法2:(在data数组中保存数据的情况)
    data() {
         test: [
             {   imgUrl: require('../assets/test.png'),   id: '1'   },
          ],
          ...
    }
    
    //方法3:在生命周期函数中设置
    data() {
        return {
            imgUrl:" "
         }
    }
    
    created() {
        let urlTemp = "assets/test.png";
        this.imgUrl = require("@/" + urlTemp)
    }
    </script>
  • 相关阅读:
    接口内容小结
    接口的静态方法与私有方法
    接口的默认方法
    发红包O
    抽象
    《大道至简》读后感
    重写
    继承中的二义性问题
    数学应用
    继承
  • 原文地址:https://www.cnblogs.com/bamboopanders/p/13273918.html
Copyright © 2011-2022 走看看