第一種
引入圖片賦值
import screen from '@/assets/images/screen.png'
使用
<img :src="screen" />
說(shuō)明:
這種方式適合單個(gè)資源使用
第二種方式
1、在src目錄下創(chuàng)建一個(gè)util文件夾，文件夾里創(chuàng)建一個(gè)utils.ts文件獲取assets靜態(tài)資源
const getAssetsFile = (url: string) => {
return new URL(`../assets/images/${url}`, import.meta.url).href;
};
export default {
getAssetsFile,
};
2、在vue文件中導(dǎo)入
import util from 'src/util/utils'
3、使用方式
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
說(shuō)明:
適用于多個(gè)資源文件，動(dòng)態(tài)傳入文件路徑
第三種方式
1、例如在assets/images文件下還有一個(gè)home文件夾獲取assets靜態(tài)資源
const getAssetsFile = (url: string) => {
const path = `../assets/images/home/${url}`;
const modules = import.meta.glob("../assets/images/home/*");
return modules[path].default;
};
export default {
getAssetsFile,
};
2、引入
import util from 'src/util/utils'
3、使用
<img class="bg-img" :src="util.getAssetsFile('bg.png')" alt="">
說(shuō)明:
適用于多個(gè)資源文件，這種方式引入的文件必須指定到具體文件夾路徑，傳入的變量中只能為文件名，不能包含文件路徑
最后一種:如果是背景圖片引入的方式（一定要使用相對(duì)路徑）
.home{
background-image: url('../../assets/images/bg.png');
}
