提示：以下是本篇文章正文內容，下面案例可供參考
Vue2項目打包后，某些圖片被轉換為base64導致無法顯示
1.為什么有些圖片會被轉成base64，而其他的卻正常輸出到dist/img目錄下？
因為Vue CLI默認可能會對小于某個閾值的圖片進行base64內聯，以減小HTTP請求的數量。
2.解決辦法
1.需要檢查Vue項目的配置文件----vue.config.js。如果沒有這個文件，需要自己創建一個。
2.Vue CLI內部使用的是Webpack，所以需要找到處理圖片的loader，比如url-loader或者file-loader。默認情況下，url-loader會在文件大小小于一定值時將文件轉換為base64，超過這個值則使用file-loader來復制文件。因此，如果問題是由于圖片大小剛好在這個閾值以下導致的，那么增大這個閾值或者完全禁用base64轉換可能解決問題。
3.解決步驟
- 在項目根目錄下
創建或修改vue.config.js文件。 - 配置
chainWebpack或configureWebpack來修改Webpack的圖片處理規則。 - 調整
url-loader的limit選項，增大其限制值，或者設置為false，這樣所有圖片都使用file-loader處理，不會被轉成base64。 - 確保file-loader的相關配置正確，比如輸出的路徑和文件名。
另外，需要確認圖片引用的方式是否正確。在Vue組件中，如果是通過相對路徑引用圖片，比如src: ‘./assets/image.png’，Webpack會處理它。但如果是動態綁定或某些特定情況下，可能需要不同的處理方式。
圖片路徑
<!-- 靜態路徑 -->
<img src="@/assets/image.png" /><!-- 動態綁定時使用require -->
<img :src="require('@/assets/' + imageName)" />
vue.config.js文件
module.exports = {publicPath: "./",chainWebpack: (config) => { // 新增圖片處理規則config.module.rule('images').use('url-loader').tap(options => ({...options,limit: 10240, // 10KB以上圖片不轉base64name: 'img/[name].[hash:8].[ext]', // 圖片輸出到dist/img目錄esModule: false, // 避免vue2兼容問題publicPath: process.env.NODE_ENV === 'production' ? './' : '/' // 路徑適配}));},
};
注意：
- 若想完全禁用base64，將limit: 0
- 如果圖片仍不顯示，檢查：
- 開發環境是否配置了publicPath: ‘/’
- 圖片是否真的超過設置的limit大小
- 控制臺是否有404錯誤（路徑問題）
總結
通過調整url-loader的limit閾值，可控制圖片是否轉為Base64。增大或禁用該值后，所有符合條件的圖片將作為獨立文件輸出到dist/img目錄，確保正確顯示。
