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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM