Home > Web Front-end > Vue.js > body text

How to insert pictures in vue.js

藏色散人
Release: 2021-01-25 15:57:08
Original
3054 people have browsed it

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.

How to insert pictures in vue.js

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

Recommended: "vue tutorial"

vue insert pictures

How to insert pictures in vue.js

First give Image address binding variable

<template>
    <img  :src="imgUrl" alt="How to insert pictures in vue.js" >
</template>
Copy after login

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>
Copy after login

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!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template