vue引入图片路径的三种主要方法

1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用

require('@/assets/home/')

2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）

~@/assets/components/

3、正常引入静态图片路径

情况一，在html里面的<img src='引入'>用下面代码

scr='static/img/v-html/'

情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/

background-image: url(/static/img/v-html/)

---

Vu3引入图片路径的方法

方法1： 

import icon from '@/assets/images/'

<img :src="icon" />
也可以在代码中直接使用icon（等同于Vue2中的require('@/assets/图片')）

方法2： 

在src目录下创建一个util文件夹，文件夹里创建一个文件获取assets静态资源

const getAssetsFile = (url: string) => {
  const path = `../assets/images/home/${url}`;

  return new URL(path, ).href;

//或者
/*  
  const modules = ("../assets/images/home/*");
  return modules[path].default;
*/

};
export default {
  getAssetsFile,
}; 

在vue3文件中导入

 import util from 'src/util/utils'

使用方式

 <img class="bg-img" :src="('')" alt="">