腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Nuxt3動(dòng)態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過(guò)程

更新時(shí)間：2026年03月09日 09:37:27 作者：積硅步以至千里

這篇文章主要介紹了Nuxt3動(dòng)態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

我的解決路程

反正踩了很久的坑，解決方法寫(xiě)在最下面，直接看下面即可

firstDefaultImg.value = `~/assets/tswstyle/images/company.png`;本地和打包后都看不到圖
firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;本地看的到，打包后無(wú)效

解決

寫(xiě)在public下：firstDefaultImg.value = `tswstyle/images/company.png`;

nuxt3 不再支持 require 動(dòng)態(tài)導(dǎo)入資源

直接這樣導(dǎo)入，瀏覽器報(bào)錯(cuò)：

ReferenceError: require is not defined

一般引入圖片時(shí)：

圖片在根目錄下 assets/tswstyle/images 文件夾下，以下在template模板引入是正確的：

瀏覽器看到的格式是：

本地開(kāi)發(fā)環(huán)境（圖片正常顯示）：

build打包之后(生產(chǎn)環(huán)境)看到的（圖片正常顯示）：

問(wèn)題：但是我這個(gè)可能需要好幾個(gè)圖片來(lái)回替換，不想寫(xiě)在 template 模板中：

我就想直接在 script 內(nèi)寫(xiě)：

<img :src="firstData.cover ? firstData.cover : firstDefaultImg" alt="" />

const firstDefaultImg = ref(''); //沒(méi)有圖片就用這個(gè)默認(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;
      }

但是在瀏覽器中看到的圖片地址并沒(méi)有轉(zhuǎn)化（依然是我寫(xiě)的字符串）：

根據(jù)瀏覽器生成的 _nuxt,我就將賦值地址改為（圖片的地址沒(méi)動(dòng)，還是在根目錄下的assets/tswstyle/images文件夾中）：

firstDefaultImg.value = `_nuxt/assets/tswstyle/images/company.png`;

在本地確實(shí)能看到圖片：

瀏覽器中：

但是build打包之后，圖片顯示不出來(lái)：

都是以原本的字符串展示（沒(méi)有解析成對(duì)應(yīng)的地址）

解決方法：圖片可以直接搬到 public，根目錄下的 public/tswstyle/images 文件夾下：

直接這樣寫(xiě)路徑即可：

firstDefaultImg.value = `tswstyle/images/company.png`;

本地瀏覽器（可以自己解析），圖片展示沒(méi)問(wèn)題：

build打包之后，生產(chǎn)環(huán)境下（圖片展示沒(méi)問(wèn)題）：

瀏覽器的地址顯示：

補(bǔ)充：

坑：引入 public 時(shí)，上面這個(gè)文件的地址

<img src="index/commerceIntroduce.png" alt="" />

這樣引入， npm run dev 可以看到加載的文件，但是run build 打包會(huì)出錯(cuò)：

引入public 靜態(tài)資源還是要用下面這種寫(xiě)法引入：

方法一：

<img src="~/public/index/commerceIntroduce.png" alt="" />

方法二：

<img :src=" 'index/commerceIntroduce.png' " alt="" />

這個(gè)代碼，其實(shí)是把他動(dòng)態(tài)引入，跟最上面的一樣，讓vue幫我們?nèi)ソ馕?，還是可以正常打包上線的

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Nuxt3動(dòng)態(tài)導(dǎo)入圖片(本地)src實(shí)現(xiàn)過(guò)程

目錄

我的解決路程

解決

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具