How to insert pictures in vue.js

The method of inserting images in vue.js: first bind variables to the image address; then set the variables in the script; finally introduce the image as a module through the require method or put imgUrl in the data.

The operating environment of this tutorial: windows7 system, vue2.0 version, thinkpad t480 computer.

Recommended: "vue tutorial"

vue insert pictures

First give Image address binding variable

<template>
    <img  src="/static/imghw/default1.png"  data-src="imgUrl"  class="lazy"  : alt="How to insert pictures in vue.js" >
</template>

Set variables in script

<script>
    //方法1.直接将图片引入为模块
    require imgUrl from "../assets/test.png"
 
    //方法2.将imgUrl放在数据里
    data(){
        return {
            imgUrl:require("../assets/test.png")
        }
    }
 
    //方法3.在生命周期函数中设置
 
    data(){
        return {
            imgUrl:""
        }
    }
 
    created(){
        let urlTemp = "assets/test.png";
        this.imgUrl = require("@/"+urlTemp)
    }
</script>

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to insert pictures in vue.js. For more information, please follow other related articles on the PHP Chinese website!