vue報(bào)錯(cuò)找不到圖片怎么辦

vue報(bào)錯(cuò)找不到圖片的解決辦法：1、修改配置文件，將絕對路徑改為相對路徑；2、將圖片作為模塊加載進(jìn)去，并將圖片放到static目錄下；3、將imageUrls引入響應(yīng)的vue文件中，解析引用即可。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、vue3、Dell G3電腦。

vue報(bào)錯(cuò)找不到圖片怎么辦？

vue中圖片加載不出來的問題及解決

在使用vue開發(fā)項(xiàng)目的時(shí)候，經(jīng)常會遇到的一個(gè)問題就是：圖片加載不出來。下面是我總結(jié)的幾種圖片加載不出來的情況及解決辦法。

一、項(xiàng)目打包完成后，打開整體空白

1、路徑問題

原因

在vue+webpack的項(xiàng)目中，項(xiàng)目打包之后的css和js的引用路徑是絕對路徑，項(xiàng)目部署之后會將靜態(tài)當(dāng)成根目錄，就造成了文件引用路徑的錯(cuò)誤。

解決辦法

通過修改配置文件，將絕對路徑改為相對路徑。

具體操作如下：

1.vue-cli 3.0版本之前

配置config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認(rèn)的路徑。

module.exports = {  build: {  env: require('./prod.env'),  index: path.resolve(__dirname, '../dist/index.html'),  assetsRoot: path.resolve(__dirname, '../dist'),  assetsSubDirectory: 'static',  assetsPublicPath: '/',  productionSourceMap: true,

assetsPublicPath默認(rèn)的是 ‘/' 也就是根目錄。而我們的index.html和static在同一級目錄下面。 所以要改為 ‘./ '

2.vue-cli 3.0版本之后

配置vue.config.js文件

module.exports = {   // baseUrl:'./', // vue-cli3.3以下版本使用   publicPath:'./' // vue-cli3.3+新版本使用

2、vue-router的history模式打包后界面空白

src里邊router/index.js路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。

如果非要使用history模式的話，需要你在服務(wù)端加一個(gè)覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個(gè)index.html,這個(gè)頁面就是你app依賴頁面。

// mode: 'history'  // 默認(rèn)hash

二、assets目錄下圖片加載不出來

vue-cli的assets和static的兩個(gè)文件的區(qū)別

• assets：在項(xiàng)目編譯的過程中會被webpack處理解析為模塊依賴，只支持相對路徑的形式，如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相對資源路徑，將有webpack解析為模塊依賴。
• static：在這個(gè)目錄下文件不會被webpack處理,簡單就是說存放第三方文件的地方，不會被webpack解析。他會直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對路徑的形式引用：/static[filename]。

根據(jù)webpack的特性，總的來說就是static放不會變動(dòng)的，第三檔的文件，asserts放可能會變動(dòng)的文件

原因

在webpack中會將圖片圖片來當(dāng)做模塊來用，因?yàn)槭莿?dòng)態(tài)加載的，所以url-loader將無法解析圖片地址，然后npm run dev 或者npm run build之后導(dǎo)致路徑?jīng)]有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png，完整地址為localhost:8080/static/img/[filename].png】

解決辦法

1.將圖片作為模塊加載進(jìn)去

比如 images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]，這樣webpack就能將其解析。

2.將圖片放到static目錄下

但必須寫成絕對路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會顯示出來，當(dāng)然你也可以通過在webpack.base.config.js定義來縮短路徑的書寫長度。

簡化本地圖片加載的方法

1.在static里面新建一個(gè)imageUrls文件夾

2.填寫imageUrls文件

{   'imageUrls': [     {       'image1': '/static/image/image1.png'     },     {       'image2': '/static/image/image2.png'     }   ] }

3.將imageUrls引入響應(yīng)的vue文件中，解析引用就行了

import img from '../../../static/imageUrls/imageUrls.json' export default {   data() {     return {       imageGroups: img.imageUrls     }   } }

推薦學(xué)習(xí)：《vue.js視頻教程》