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="imgUrl" 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!