//template中
<img :src="boxHerf" />
//js
let boxHerf = ref('/src/assets/images/contain.svg')
上述寫法本地能夠正常訪問圖片，但是打包之后無法正常訪問,將 boxHerf 換成下列寫法即可解決
let boxHerf = new URL('/src/assets/images/contain.svg', import.meta.url).href;
注意：new URL(url,import.meta.url)中的參數(shù)url，不能如下面定義變量拼接
const getPath = (url) => {
let path = 'src/assets';
return new URL(`${path}${url}`, import.meta.url).href;
};
上述開發(fā)沒問題，但是打包會(huì)報(bào)錯(cuò)，不支持import.meta.url
new URL()
創(chuàng)建一個(gè)新 URL 對象的語法：new URL(url, [base])
-
url —— 完整的 URL，或者僅路徑（如果設(shè)置了 base），
-
base —— 可選的 base URL：如果設(shè)置了此參數(shù)，且參數(shù) url 只有路徑，則會(huì)根據(jù)這個(gè) base 生成 URL。
'/src/assets/images/contain.svg'是相對路徑，而import.meta.url 是 base url （根鏈接）。
import.meta
import.meta 對象包含關(guān)于當(dāng)前模塊的信息。
它的內(nèi)容取決于其所在的環(huán)境。在瀏覽器環(huán)境中，它包含當(dāng)前腳本的 URL，或者如果它是在 HTML 中的話，則包含當(dāng)前頁面的 URL。
因此可以把import.meta 打印出來：
console.log("import.meta.url" ,import.meta)
//import.meta.url
es6使用require引入圖片
1、直接寫成靜態(tài)的是沒有問題的
let imgUrl = require('../images/001.png');
2、如果你想動(dòng)態(tài)的引入圖片，就會(huì)報(bào)錯(cuò)
let ImgSrc = "../images/001.png";
let img = require(ImgSrc)
因?yàn)閞equire是打包工具所需要的標(biāo)識，你寫成運(yùn)行時(shí)通過變量定義，是無法獲取到，沒辦法打包。
3、require()寫入的必須是path文章來源：http://www.zghlxwxcb.cn/news/detail-736220.html
let imgSrc = "001.png";
require("../../asset/images/" + imgSrc);
let imgName = "001";
require(`../../asset/images/${imgName}.png`);
注：require是webpack的語法，vite無法使用文章來源地址http://www.zghlxwxcb.cn/news/detail-736220.html
到了這里，關(guān)于vue本地能夠訪問圖片，打包項(xiàng)目之后圖片無法訪問的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
