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

最新推荐文章于 2024-08-16 10:29:15 发布

转载最新推荐文章于 2024-08-16 10:29:15 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://mp.youkuaiyun.com/editor/html/112374664

文章标签：

#vue 引入图片 #vue图片 #require引入 #require

vue 专栏收录该内容

17 篇文章

订阅专栏

废话少说了，直接上代码

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