這篇“vue報錯找不到圖片如何解決”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue報錯找不到圖片如何解決”文章吧。

在做網(wǎng)站、成都網(wǎng)站制作過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標受眾和市場情況進行定位分析，以確定網(wǎng)站的風格、色彩、版式、交互等方面的設計方向。創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。

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

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

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

一、項目打包完成后，打開整體空白

1、路徑問題

原因

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

解決辦法

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

具體操作如下：

1.vue-cli 3.0版本之前

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

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默認的是  ‘/'  也就是根目錄。而我們的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路由配置里邊默認模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認的就行 。

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

// mode: 'history'
// 默認hash

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

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

• assets：在項目編譯的過程中會被webpack處理解析為模塊依賴，只支持相對路徑的形式，如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相對資源路徑，將有webpack解析為模塊依賴。

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

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

原因

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

解決辦法

1.將圖片作為模塊加載進去

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

2.將圖片放到static目錄下

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

簡化本地圖片加載的方法

1.在static里面新建一個imageUrls文件夾

2.填寫imageUrls文件

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

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

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

以上就是關(guān)于“vue報錯找不到圖片如何解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。