解决vue 直接图片引入报错问题

屠晟睿
2023-12-01

 废话少说了,直接上代码

<div class="login_title">
    <img  :src="logo" class="mk_logo" />
</div>
//方法1.直接将图片引入为模块
 require imageSrc from "../assets/logo.jpg"

//方法2.把图片放在数据中
 export default {
  name: 'HelloWorld',
  data () {
    return {
      logo:require('../assets/logo.jpg')
    }
  },
}

//方法3.在生命周期函数
created() {
    let src = "assets/logo.jpg";
    this.logo= require("@/" + src )
}

另一种:style 方式

<div class="logo" :style ="bg"></div>
export default {
name: 'HelloWorld',
data() {
 return {
  bg: {
  backgroundImage: "url(" + require("../../assets/logo.png") + ")",
  backgroundRepeat: "no-repeat"
  },
 }
},

 

 类似资料: