vue如何通過src引用assets中的圖片
更新時間：2022年03月26日 11:36:55 作者：maidu_xbd
這篇文章主要介紹了vue如何通過src引用assets中的圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue:src引用assets的圖片
導(dǎo)入圖片并在data中聲明
<script>
import backImg from "../../assets/images/backimg.jpg";?
export default {
? data() {
? ? return {
? ? backImg: backImg,
? ? };
? }?
</script>使用
<img :src="backImg" ?/>
vue引入圖片方式
對于靜態(tài)的img,正常引入即可
<img src="@/assets/img/login/user.png"> // 可以使用@
當(dāng)使用模板綁定src時
// 不可以使用@，無法解析；也無法找到assets目錄 <img :src="@/assets/img/login/user.png">?
方式1：
// 將圖片放到static目錄下 <img :src="'../../static/img/login/user.png'">?
方法2：
在data中require()進來：
// html
<img :src="img">?
// data
img: require('@/assets/img/login/user.png')方法3：import進來
// html <img :src="img">? // script import img from '@/assets/img/login/user.png' // data img: img
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue做移動端適配最佳解決方案(親測有效)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue.extend 登錄注冊模態(tài)框的實現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊模態(tài)框的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue如何在store倉庫中使用路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue報錯Module build failed: Error: Node&nb
這篇文章主要介紹了Vue報錯Module build failed: Error: Node Sass version 7.0.1 is incompatible with 4.0.0.解決方案,需要的朋友可以參考下2023-06-06
Vue3+TS項目中eslint、prettier安裝配置詳細(xì)指南
為了更好的統(tǒng)一項目的代碼風(fēng)格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴(yán)謹(jǐn),這篇文章主要給大家介紹了關(guān)于Vue3+TS項目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07
本文詳細(xì)介紹了Vue中nextTick的原理和使用方法,Vue采用異步渲染機制,通過nextTick可以確保在DOM更新后執(zhí)行回調(diào),nextTick依賴微任務(wù)和宏任務(wù),優(yōu)先使用Promise,降級到MutationObserver/setTimeout,Vue3進一步優(yōu)化了nextTick,減少了復(fù)雜度并提升了性能2025-02-02
vue-cli 是 Vue.js 開發(fā)的標(biāo)準(zhǔn)工具,它簡化了程序員基于 webpack 創(chuàng)建工程化的 Vue 項目的過程,下面這篇文章主要給大家介紹了關(guān)于Vue命令行工具Vue-CLI的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過實例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下2023-03-03
過濾器的功能是對要顯示的數(shù)據(jù)進行格式化后再顯示,其并沒有改變原本的數(shù)據(jù),只是產(chǎn)生新的對應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-12-12