vue项目中如何在data中引入图片

发布时间:2022年03月31日评论数：抢沙发阅读数： 3383

	在Vue项目中，我们会发现，当我们在data中引入图片时，会发现图片在页面中并不能正常显示。

	图片路径错误：

	错误的引入方式：

export default {
  data () {
    return {
      logo: '@/assets/image/img/liruotong1.jpg'
    }
  }
}

有效的引入方法：

	1.import引入 

import logo_url from '@/assets/image/img/liruotong1.jpg'
export default {
  data () {
    return {
      logo: logo_url
    }
  }
}

2.require引入

export default {
  data () {
    return {
      logo: require('@/assets/image/img/liruotong1.jpg')
    }
  }
}

本文作者：DGF 文章标题： vue项目中如何在data中引入图片
本文地址： https://www.arbays.com/post-178.html 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。

最新文章：