vue中圖片不顯示問題

靜態(tài)資源

• 在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理后再輸出到打包后的文件。
• 放置在 public(static)目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝到打包后的文件，而不會經(jīng)過 webpack 的處理。
  在config.js的build.assetsPublicPath 和 build.assetsSubDirectory中設置

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

URL 轉(zhuǎn)換規(guī)則

• 如果URL是一個絕對路徑如/panda.png，則該路徑會被保留
• 如果URL以.開頭，會被理解為相對路徑，并基于目錄結(jié)構(gòu)進行解析。沒有前綴的URL, 如assets/logo.png 將會被看成相對URL，并且轉(zhuǎn)換成./assets/logo.png。例如，url(./image.png) 會被翻譯為 require('./image.png')
• 如果URL以@開頭，也會作為一個模塊請求被解析。Vue CLI 默認會設置一個指向 /src 的別名 @。(僅作用于模版中)

webpack 靜態(tài)資源處理

在*.vue組件中，所有的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。

在JavaScript里獲取資源路徑
為了能讓Webpack返回正確的資源路徑，使用require('./relative/path/to/file.jpg')，由file-loader進行解析，然后返回處理過的URL。

圖片不顯示問題

問題描述

直接傳地址是可以正常顯示的

<img src="./assets/tile.jpg" alt="">

但很多需求不允許直接傳遞。比如父組件往子組件傳遞圖片地址等。然后發(fā)現(xiàn)使用變量傳遞字符串后圖片不顯示。

/* 錯誤寫法 */
// js
const imgSrc = './assets/tile.jpg'

//template
<img :src="imgSrc"></img>

原因
根據(jù)結(jié)果來看，相對地址沒有被解析。在webpack中會將圖片來當做模塊來用，因為是動態(tài)加載的，所以url-loader將無法解析圖片地址(被webpack解析到的路徑都會被解析為/static/img/[filename].png)

解決辦法1：使用require引入

正確的引入方法
使用require引用后，由file-loader進行解析，然后返回處理過的URL。

const img_src = require('../../assets/images/panda.png');
console.log(img_src); // 打印 ./assets/images/panda-aad48f9a4cf0f953ccb4af0ad32bd3cc.png

<img :src="imgSrc"></img>

使用require的錯誤引入方法

<img :src="require(imgSrc)"></img>

這里的錯誤原因理解的是動態(tài)綁定src,img_src被理解為變量，而require沒有被理解為變量。src去讀取img_src變量的值，該變量的值就是一個字符串，所以最后顯示的是字符串沒有解析地址去獲取圖片。

require is not defined

vue3+typeScript使用require方法引入圖片的時候會報錯require is not defined

因為require是webpack提供的一種加載能力，但是vue3項目時搭配vite的，所以這里應該用vite提供的靜態(tài)資源載入方法，

vite官網(wǎng)的靜態(tài)資源載入方法

import.meta.url 是一個 ESM 的原生功能，會暴露當前模塊的 URL。與原生的 URL 構(gòu)造器 組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態(tài)資源 URL

// js
const img_src = new URL("./assets/tile.jpg", import.meta.url).href
//img_src: http://127.0.0.1:5173/src/assets/tile.jpg 
//import.meta.url: http://127.0.0.1:5173/src/App.vue?t=1706082462328
console.log(img_src,import.meta.url)


//template
<img :src="img_src" alt="">

解決辦法2：使用import引入

打印tile的結(jié)果是/src/assets/tile.jpg，import引入后地址由相對路徑變成了絕對路徑，webpack不會對絕對路徑進行處理。

require是在運行時加載，import是編譯時加載

// js
import tile from "./assets/tile.jpg";
console.log(tile)

//template
<img :src="tile" alt="">

解決辦法3：將圖片放進公共文件夾static或public

1.將圖片放進公共文件夾static或public
2.然后使用絕對路徑引入文章來源地址http://www.zghlxwxcb.cn/news/detail-824511.html

到了這里，關(guān)于vue中圖片不顯示問題 - vue中靜態(tài)資源加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！