vue中圖片加載不出來怎么辦

這篇文章主要為大家展示了“vue中圖片加載不出來怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中圖片加載不出來怎么辦”這篇文章吧。

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

1、路徑問題

原因

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

解決辦法

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

具體操作如下：

1.vue-cli 3.0版本之前

配置config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，而你的路徑不對(duì)，打開肯定是空白的。先看一下默認(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在同一級(jí)目錄下面。  所以要改為  ‘./ '

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模式的話，打開也會(huì)是一片空白。所以改為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)目編譯的過程中會(huì)被webpack處理解析為模塊依賴，只支持相對(duì)路徑的形式，如< img src=&rsquo;./logo.png&lsquo;>和background:url(./logo.png),&lsquo;./logo.png&lsquo;是相對(duì)資源路徑，將有webpack解析為模塊依賴。

• static：在這個(gè)目錄下文件不會(huì)被webpack處理,簡單就是說存放第三方文件的地方，不會(huì)被webpack解析。他會(huì)直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對(duì)路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對(duì)路徑的形式引用：/static[filename]。

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

原因

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

解決辦法

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

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

2.將圖片放到static目錄下

但必須寫成絕對(duì)路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會(huì)顯示出來，當(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
    }
  }
}

以上是“vue中圖片加載不出來怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！