解決vuecli3中img src 的引入問題
最近公司要做一個在線ps 的項目 但是后臺沒寫完, 我在用本地圖片上傳預(yù)覽的時候 發(fā)現(xiàn)圖片不能顯示, 解決的辦法 是
//頁面的結(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: []
};
},
}
之前我用了絕對路徑和 相對路徑 都沒有辦法實現(xiàn), 后來查官方文檔是因為沒有存放靜態(tài)的asset 文件了 ,靜態(tài)現(xiàn)在存放在public 的里面. 但是我在public里面去創(chuàng)建一個img 的文件,去放置圖片,依然不可以. 所以 三種辦法里面 只有require 使用vuecli3 ,
如果大家有好的解決辦法 可以一起分享
1、在模板中直接引入圖片資源（這種一般是@ 或者./ 去引入）
2、將圖片資源放在static文件夾下
3、圖片資源在assets文件夾下，data中必須用require加載，否則會當(dāng)成字符串來處理
(我自己目前就是放在assets 里面. 因為是本地上傳的 在做假數(shù)據(jù)的時候準備做一個預(yù)覽,或者說以后的默認圖片就是它了)
第二種，只要給圖片放在static文件夾下即可：原因如下
這里在使用vuecli腳手腳構(gòu)建工具，目錄下會生成一個static目錄，表示的是靜態(tài)目錄，推薦大家將img 存放在這個目錄下，那么在webpack編譯以后，依舊是可以獲取到這個目錄下的路徑，這樣就解決了路徑不符而導(dǎo)致圖片加載不出來的問題！當(dāng)然項目中用的一般都是絕對路徑，少數(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 去頁面跳轉(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 });
}
}
};
補充知識：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 的引入問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
最近項目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細圖文教程,需要的朋友可以參考下2023-04-04
這篇文章給大家介紹基于vue實現(xiàn)循環(huán)滾動列表功能，給大家介紹了該組件的用法，通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-09-09
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue數(shù)據(jù)響應(yīng)式原理知識點總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue數(shù)據(jù)響應(yīng)式原理知識點總結(jié)，有興趣的朋友們可以跟著學(xué)習(xí)下。2020-02-02
vue+element?ui表格添加多個搜索條件篩選功能(前端查詢)
這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了解決vue頁面注入js修改input值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家分享了vue開發(fā)心得和技巧,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue使用json-server進行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進行后端數(shù)據(jù)模擬功能,非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04