您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页解决vue 直接图片引入报错问题

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

来源:宝玛科技网

 废话少说了,直接上代码

<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"
  },
 }
},

 

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务