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