1. 程式人生 > >vue系列---專案打包找不到圖片路徑

vue系列---專案打包找不到圖片路徑

在測試環節發現有圖片找不到,發現是圖片路徑沒有寫對。
報錯如下:
這裡寫圖片描述

原始碼:

 <img src="/src/assets/img/arrow.png" alt="" class="col-step">

這種引入圖片的方式是錯誤的,雖然在頁面展示的時候會出現,但是在打包後就會出現編譯問題,src是無法編譯的。

正確的引入格式:

第一種:

 <img src="../../assets/img/arrow.png" alt="">

第二種方式:


使用v-bind進行自定義指令,在data中進行圖片路徑的相對引入:

contractSL: require(‘../../assets/img/user/constract00.png’),
“`

這樣在打包後就避免了圖片途徑找不到的問題。

相關推薦

vue系列---專案打包圖片路徑

在測試環節發現有圖片找不到,發現是圖片路徑沒有寫對。 報錯如下: 原始碼: <img src="/src/assets/img/arrow.png" alt="" class="col-step"> 這種引入圖片的方式是錯誤的

vue+webpack專案打包後背景圖片載入出來

在做VUE +的WebPack腳手架專案打包完成後,在IIS伺服器上執行發現專案中的背景圖片載入不出來檢查專案程式碼發現是因為CSS檔案中,背景圖片引用的路徑問題;後來通過修改配置檔案,問題終於解決了,解決方法如下: 1.修改資源路徑 在VUE +的WebPack專案中,專案打包後的CSS和

Vue項目打包後背景圖片路徑錯誤

resolv sse options require xtra pro gpo 解決方案 ron vue項目打包之後背景圖片出錯的解決方案如下: 1,找到 config->index.js裏面,如下修改 默認配置:  env: require(‘./prod.

vue-cli專案打包需要修改的路徑問題

1. 命令列輸入:npm  run  build     打包出來後項目中就會多了一個資料夾dist,這就是我們打包過後的專案。 第一個問題,檔案引用路徑。我們直接執行打包後的資料夾中的index.html檔案,會看到網頁一片空白,f12除錯,全是css,js路

vue打包後出現靜態資源|(圖片,json數據)路徑

CP 解決 png 路徑 分享圖片 分享 com 奇跡 public 最近在學習Vue是如何編寫項目的,在踩了許多坑後,終於要到了最後一步npm run build了,很開心的等待奇跡,然後打包後出現了找不到圖片路徑的問題。 解決辦法:1.將圖片或者json數據文件夾放到s

vue 打包圖片路徑

 背景圖要放在static檔案中;在build中的utils.js中的 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, // 背景圖的時候使

vue專案打包後,npm run build相關配置,以及解決專案打包後,圖片404,背景圖片到,iview程式碼出問題的情況

1.首先找到config下的index.js檔案 將build下的assetsPublicPath的斜槓換成./ 操作如下 只需要換build中的就可以 dev中的assetsPublicPath不用動 不然打包過後 npm run dev的時候直接出現can not Ge

webpack打包vue專案後,一些檔案圖片路徑到的問題解決辦法

最近寫了一個百度地圖的專案,要求底部有一個導航欄。具體如下圖: 首先,拿到了底部導航欄的所有圖示圖片,圖片都有兩種。灰色的代表未選中,選中的用帶樣色的圖片替換。 先看一下,元件中 html結構:通過vue提供的v-for方法,進行遍歷顯示footNav這個陣列。數

Vue專案打包時背景圖片資源路徑錯誤的解決方案

使用專案構建工具webpack或者vue-cli時,打包好的專案放伺服器上背景圖片都顯示不出來,控制檯提示資源404 not found,解決辦法如下: 在build檔案目錄下找到utils.js檔案 找到如下程式碼,新增一行程式碼:publicPath: '../../'即可

vue 打包路徑

在打包後發現點開dist方件;瀏覽器中一片空白; 我們需要在config檔案下的 把 assetsPublicPath: "/", 變成: assetsPublicPath: "./", 這個可以讓他變成相對路徑  把: product

vue-cli專案打包圖片路徑問題

專案目錄結構如下(圖片習慣放在src->assets->img裡面)第一步,修改config目錄裡面的index.js檔案將 assetsPublicPath: '/' 改為 assetsPublicPath: './'第二步,修改build目錄裡面的utils.

vue-cli 打包到 css 資源或者圖片資源問題

用vue-cli 開發,要打包了,放到tomcat 上發現css 或者圖片載入不出來,控制檯一看是資源路徑不對 資源是在assets 目錄下的 徹底的解決辦法 utils.js 檔案中 if

打包jar後路徑

  我們常常在程式碼中讀取一些資原始檔(比如圖片,音樂,文字等等)。在單獨執行的時候這些簡單的處理當然不會有問題。但是,如果我們把程式碼打成一個jar包以後,即使將資原始檔一併打包,這些東西也找不出來了。看看下面的程式碼:Java程式碼  //原始碼1:  package e

Android 通過相簿選擇圖片提示路徑 open failed: EROFS (Read-only file system)

app中使用者資訊上傳頭像這個挺常見的,一般的都是拍照或選擇圖片上傳。這樣一般會出現三個常見問題。 1.進入照相機或相簿後,如果沒有進行任何操作直接back鍵返回,有可能造成程式崩潰。 其中一種解決辦法就是判斷onActivityResult方法裡的resultCode,經

Vue -- Vue打包後背景圖片路徑錯誤

Vue專案中使用圖片的方法有如下幾種: 1、圖片資源放在 assets -> imgs資料夾下面 ①img標籤引入圖片 <img src="../assets/imgs/bg.

R中讀取文件,路徑問題 No such file or directory

con tracking air csdn rac rect 路徑 路徑和 data R中讀取文件,找不到路徑問題 No such file or directory 近日,讀取文件時。出現例如以下問題 > passenger = read.c

maven的web專案啟動到Spring ContextLoaderListener

解決方法: 1. 右鍵單擊工程專案 ->點選 properties2. 選擇 Deployment Assembly3. 點選 Add -> Java Build Path Entries -> Next4. 選擇 Maven Dependencies -> Finish

visual studio for mac新建專案到dotnet core選項

1.使用下面的命令找到dotnet core的安裝目錄 (預設目錄是 path: /usr/local/share/dotnet/dotnet find / -name dotnet 2.首選項(在一般程式偏好設定的位置)->sdk位置->.net core comma

記錄一次子母包問題導致路徑

根據這篇文章https://bbs.pediy.com/thread-246767.htm的思路 以廣州圈app為案例,分析其的程式碼發現,採用的是外掛化載入方式,下載的apk包只是一個載體,真正的apk隱藏在assets裡面,不過這樣感覺還是挺好的,可以減小apk包的大小,至於這種方式有沒

vue腳手架專案打包記錄

記錄一下需要打包的過程和和需要修改的配置 1:需要修改cinfig檔案下的index.js檔案中配置資訊 將assetsPublicPath:'/'  改成 assetsPublicPath:'./'   2:想要訪問靜態資源需要修改b