最近公司要做一個線上ps 的專案 但是後臺沒寫完,我在用本地圖片上傳預覽的時候 發現圖片不能顯示,解決的辦法 是

//頁面的結構
 <div class="workspace" >
     <img :src='img'>
 </div>
export default {
 data() {
  return {
   img:require('../../assets/fapiao.jpeg'),//這裡只能使用require的方式去使用 如果img 是陣列,就用 
   //[require('../../assets/fapiao1.jpeg'),//require('../../assets/fapiao2.jpeg'),//require('../../assets/fapiao3.jpeg').....]
   fileList: []
  };
 },}

之前我用了絕對路徑和 相對路徑 都沒有辦法實現,後來查官方文件是因為沒有存放靜態的asset 檔案了,靜態現在存放在public 的裡面. 但是我在public裡面去建立一個img 的檔案,去放置圖片,依然不可以. 所以 三種辦法裡面 只有require 使用vuecli3,

如果大家有好的解決辦法 可以一起分享

1、在模板中直接引入圖片資源（這種一般是@ 或者./ 去引入）

2、將圖片資源放在static資料夾下

3、圖片資源在assets資料夾下，data中必須用require載入，否則會當成字串來處理

(我自己目前就是放在assets 裡面. 因為是本地上傳的 在做假資料的時候準備做一個預覽,或者說以後的預設圖片就是它了)

第二種，只要給圖片放在static資料夾下即可：原因如下

這裡在使用vuecli腳手腳構建工具，目錄下會生成一個static目錄，表示的是靜態目錄，推薦大家將img 存放在這個目錄下，那麼在webpack編譯以後，依舊是可以獲取到這個目錄下的路徑，這樣就解決了路徑不符而導致圖片載入不出來的問題！當然專案中用的一般都是絕對路徑，少數圖片的話，這種方式挺好

但是 重點: vuecli3 沒有static 啊!!!

=======補充

 <ul>
     <li v-for="(item,index) in src" :key="index" @click="jump">
      <img :src="item" alt>
     </li>
 </ul>

export default {
 data() {
  return {
   centerDialogVisible: false,form: {
    LoginName: "",PassWord: ""
   },rules: {
    LoginName: [
     { required: true,message: "請輸入使用者名稱",trigger: "blur" }
    ],PassWord: [{ required: true,message: "請輸入密碼",trigger: "blur" }]
   },message: "",src: [
    require("../assets/imgs/001.jpg"),require("../assets/imgs/002.jpg"),require("../assets/imgs/003.jpg"),require("../assets/imgs/004.jpg"),require("../assets/imgs/005.jpg")
   ]
  };
 },

完美的動態繫結,Gong智障繼續加油 哈哈哈哈~!!!

再這個頁面上接著補充一個 如果router-link 去頁面跳轉的怎麼加配置

 <ul>
     <li v-for="(item,index) in src" :key="index" @click="jump(item.address)" :plain="true">
      <img :src="item.img" alt>
     </li>
   
  </ul>

export default {
 data() {
  return {
   centerDialogVisible: false,src: [
    { img: require("../assets/imgs/001.jpg"),address: "taxplayerinfo" },{ img: require("../assets/imgs/002.jpg"),address: "taxsheet" },{ img: require("../assets/imgs/003.jpg"),address: "search" },{ img: require("../assets/imgs/004.jpg"),address: "home" }
   ]
  };
 },methods: {
 jump(address) {
   this.$router.push({ name: address });
  }
 }
};

補充知識：vue-cli3.0 圖片放在public，vue打包部署非根目錄時，圖片引入錯誤

解決辦法：

方法1. 修改nginx 配置，以部署目錄espace為例

upstream a.xx.com{
  server 127.0.0.1:8081;
}

server {
  listen  80;
  server_name a.xx.com;
  location /{
    proxy_pass http://a.xx.com;
  }
  location ^~/images/ {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8001/images/;
  }
  location ^~/espace/ {
    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://127.0.0.1:8001/;
  }
}

方法2. 修改檔案目錄，將檔案放於src/assets/images

vue.config.js

let path = require('path')

function resolve(dir) {
  return path.join(__dirname,dir)
}
module.exports = {
 chainWebpack: config => {
    config.resolve.alias.set('@',resolve('src'));
  }
}

圖片引入

<img src="@/assets/images/icon_file.png">
.check_box a.active::after {
  background: url(~@/assets/images/check_box.png) no-repeat center;
}

以上這篇解決vuecli3中img src 的引入問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。