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

在 Vue 项目中，我们会发现，当我们在 data 中引入图片时，图片在页面中并不能正常显示。出现这种情况的原因是图片路径的引入方式不正确。

错误的引入方式

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

有效的引入方法

1. 使用 import 引入
   import 语法是最常用且正确的方式，将图片路径作为模块引入：

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

2. 使用 require 引入
   如果你偏向使用 require 语法，也可以这样引入图片：

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