解決vuecli3中img src 的引入問題
最近公司要做一個在線ps 的項目 但是后臺沒寫完, 我在用本地圖片上傳預覽的時候 發(fā)現(xiàn)圖片不能顯示, 解決的辦法 是
//頁面的結構
<div class="workspace" >
<img :src='img'>
</div>
export default {
data() {
return {
img:require('../../assets/fapiao.jpeg'),
//這里只能使用require的方式去使用 如果img 是數(shù)組, 就用
//[require('../../assets/fapiao1.jpeg'),
//require('../../assets/fapiao2.jpeg'),
//require('../../assets/fapiao3.jpeg').....]
fileList: []
};
},
}
之前我用了絕對路徑和 相對路徑 都沒有辦法實現(xiàn), 后來查官方文檔是因為沒有存放靜態(tài)的asset 文件了 ,靜態(tài)現(xiàn)在存放在public 的里面. 但是我在public里面去創(chuàng)建一個img 的文件,去放置圖片,依然不可以. 所以 三種辦法里面 只有require 使用vuecli3 ,
如果大家有好的解決辦法 可以一起分享
1、在模板中直接引入圖片資源（這種一般是@ 或者./ 去引入）
2、將圖片資源放在static文件夾下
3、圖片資源在assets文件夾下，data中必須用require加載，否則會當成字符串來處理
(我自己目前就是放在assets 里面. 因為是本地上傳的 在做假數(shù)據(jù)的時候準備做一個預覽,或者說以后的默認圖片就是它了)
第二種，只要給圖片放在static文件夾下即可：原因如下
這里在使用vuecli腳手腳構建工具，目錄下會生成一個static目錄，表示的是靜態(tài)目錄，推薦大家將img 存放在這個目錄下，那么在webpack編譯以后，依舊是可以獲取到這個目錄下的路徑，這樣就解決了路徑不符而導致圖片加載不出來的問題！當然項目中用的一般都是絕對路徑，少數(shù)圖片的話，這種方式挺好
但是 重點: 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")
]
};
},
完美的動態(tài)綁定, Gong智障繼續(xù)加油 哈哈哈哈~!!!
再這個頁面上接著補充一個 如果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 的引入問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element ui el-date-picker組件默認值方式
這篇文章主要介紹了element ui el-date-picker組件默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue使用vm.$set()解決對象新增屬性不能響應的問題,為了解決這個問題，Vue提供了一個特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以參考下2023-05-05
vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果(解決思路)
最近遇到一個問題，我們在企業(yè)微信中的 H5 項目中需要用到table表格（支持懶加載 上劃加載數(shù)據(jù)），但是他們在鎖頭、鎖列的情況下，依舊會出現(xiàn)邊界橡皮筋效果，這篇文章主要介紹了vue項目中解決 IOS + H5 滑動邊界橡皮筋彈性效果,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了如何使用vue-router為每個路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下2018-07-07
webpack是一個模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點,需要的朋友可以參考下2018-09-09
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）,這篇文章主要給大家介紹了關于Vue.js函數(shù)式組件的相關資料,需要的朋友可以參考下2021-10-10
Vue+Openlayer實現(xiàn)圖形的拖動和旋轉變形效果
Openlayer具有自己的擴展插件ol-ext，可以用來實現(xiàn)圖形的拖拽、旋轉、縮放、拉伸、移動等操作，本文將主要介紹通過Openlayer實現(xiàn)圖形的拖動和旋轉，需要的同學可以學習一下2021-11-11
這篇文章主要介紹了vue v-model的相關資料，幫助大家更好的理解和學習vue，感興趣的朋友可以了解下2020-08-08
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-06-06
vue解決使用$http獲取數(shù)據(jù)時報錯的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10