Nuxt3動態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過程
我的解決路程
反正踩了很久的坑，解決方法寫在最下面，直接看下面即可
- firstDefaultImg.value = `~/assets/tswstyle/images/company.png`;本地和打包后都看不到圖
- firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;本地看的到，打包后無效
解決
寫在public下：firstDefaultImg.value = `tswstyle/images/company.png`;
nuxt3 不再支持 require 動態(tài)導(dǎo)入資源
直接這樣導(dǎo)入，瀏覽器報(bào)錯：
ReferenceError: require is not defined
一般引入圖片時：
圖片在根目錄下 assets/tswstyle/images 文件夾下，以下在template模板引入是正確的：
瀏覽器看到的格式是：
本地開發(fā)環(huán)境（圖片正常顯示）：
build打包之后(生產(chǎn)環(huán)境)看到的（圖片正常顯示）：
問題：但是我這個可能需要好幾個圖片來回替換，不想寫在 template 模板中：
我就想直接在 script 內(nèi)寫：
<img :src="firstData.cover ? firstData.cover : firstDefaultImg" alt="" />
const firstDefaultImg = ref(''); //沒有圖片就用這個默認(rèn)的圖片地址（字符串）
//因?yàn)槭?tab切換的，所以切換的tab不同，默認(rèn)圖片也不同
switch (active.value) {
case 1:
firstDefaultImg.value = `~/assets/tswstyle/images/company.png`;
break;
case 2:
firstDefaultImg.value = `~/assets/tswstyle/images/govbusCommunication.png`;
break;
case 3:
firstDefaultImg.value = `~/assets/tswstyle/images/Partyactivity.jpg`;
break;
case 4:
firstDefaultImg.value = `~/assets/tswstyle/images/welfare.png`;
break;
case 5:
firstDefaultImg.value = `~/assets/tswstyle/images/recruitImg.png`;
break;
default:
break;
}但是在瀏覽器中看到的圖片地址并沒有轉(zhuǎn)化（依然是我寫的字符串）：
根據(jù)瀏覽器生成的 _nuxt,我就將賦值地址改為（圖片的地址沒動，還是在根目錄下的assets/tswstyle/images文件夾中）：
firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;
在本地確實(shí)能看到圖片：
瀏覽器中：
但是build打包之后，圖片顯示不出來：
都是以原本的字符串展示（沒有解析成對應(yīng)的地址）
解決方法：圖片可以直接搬到 public，根目錄下的 public/tswstyle/images 文件夾下：
直接這樣寫路徑即可：
firstDefaultImg.value = `tswstyle/images/company.png`;
本地瀏覽器（可以自己解析），圖片展示沒問題：
build打包之后，生產(chǎn)環(huán)境下（圖片展示沒問題）：
瀏覽器的地址顯示：
補(bǔ)充：
坑：引入 public 時，上面這個文件的地址
<img src="index/commerceIntroduce.png" alt="" />
這樣引入， npm run dev 可以看到加載的文件，但是run build 打包會出錯：
引入public 靜態(tài)資源還是要用下面這種寫法引入：
- 方法一：
<img src="~/public/index/commerceIntroduce.png" alt="" />
- 方法二：
<img :src=" 'index/commerceIntroduce.png' " alt="" />
這個代碼，其實(shí)是把他動態(tài)引入，跟最上面的一樣，讓vue幫我們?nèi)ソ馕?，還是可以正常打包上線的
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了VUE-ElementUI?時間區(qū)間選擇器的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考
這篇文章主要為大家介紹了vue?長列表數(shù)據(jù)刷新的實(shí)現(xiàn)及思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關(guān)于vue3封裝輪播圖組件功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法
vue-cli是 vue 官方提供的、快速生成 vue 工程化項(xiàng)目的工具，支持創(chuàng)建vue2和vue3的項(xiàng)目，本文給大家詳細(xì)講解vue-cli是什么及創(chuàng)建vue-cli項(xiàng)目的方法，感興趣的朋友跟隨小編一起看看吧2023-04-04
vue項(xiàng)目使用高德地圖時報(bào)錯:AMap?is?not?defined解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用高德地圖時報(bào)錯:AMap?is?not?defined的解決辦法,"AMap is not defined"是一個錯誤提示,意思是在代碼中沒有找到定義的AMap,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了Vue常見組件間通信方案及典型應(yīng)用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue動態(tài)修改頁面Title(瀏覽器頁簽名稱)的三種方法
在開發(fā) Vue 項(xiàng)目時,我們經(jīng)常需要根據(jù)不同的頁面動態(tài)修改瀏覽器的頁簽標(biāo)題（title）,那么,如何在 Vue 項(xiàng)目中實(shí)現(xiàn)動態(tài)修改 document.title 呢？本文將介紹三種實(shí)用方法,并結(jié)合代碼示例,助你輕松實(shí)現(xiàn),需要的朋友可以參考下2025-03-03
VueJs單頁應(yīng)用實(shí)現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例
本篇文章主要介紹了VueJs單頁應(yīng)用實(shí)現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue3?源碼分析reactive?readonly實(shí)例
這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10