解決vuecli3中img src 的引入問(wèn)題
最近公司要做一個(gè)在線ps 的項(xiàng)目 但是后臺(tái)沒(méi)寫(xiě)完, 我在用本地圖片上傳預(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)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能
這篇文章給大家介紹基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能,給大家介紹了該組件的用法,通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-09-09
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過(guò)合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來(lái)減少重復(fù)渲染的次數(shù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue數(shù)據(jù)響應(yīng)式原理知識(shí)點(diǎn)總結(jié),有興趣的朋友們可以跟著學(xué)習(xí)下。2020-02-02
vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢(xún))
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問(wèn)題,需要的朋友可以參考下2023-08-08
解決vue頁(yè)面注入js修改input值問(wèn)題
這篇文章主要介紹了解決vue頁(yè)面注入js修改input值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04

