vue引入图片

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

require('@/assets/home/imgName.png')

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

~@/assets/components/imgName.svg

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

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

scr='static/img/v-html/imgName.jpg'

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

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

Vu3引入图片路径的方法
方法1： 

import icon from '@/assets/images/icon.png'

<img :src="icon" />

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

方法2： 
在src目录下创建一个util文件夹，文件夹里创建一个utils.ts文件获取assets静态资源

const getAssetsFile = (url: string) => {
  const path = `../assets/images/home/${url}`;
 
  return new URL(path, import.meta.url).href;
 
//或者
/*  
  const modules = import.meta.glob("../assets/images/home/*");
  return modules[path].default;
*/
 
};
export default {
  getAssetsFile,
}; 

在vue3文件中导入

 import util from 'src/util/utils'
使用方式

 <img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">