vue如何通過src引用assets中的圖片
更新時間：2022年03月26日 11:36:55 作者：maidu_xbd
這篇文章主要介紹了vue如何通過src引用assets中的圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue:src引用assets的圖片
導入圖片并在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"> // 可以使用@
當使用模板綁定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)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
vue3深入學習?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學習?nextTick和historyApiFallback，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了深入理解vue的使用，對vue感興趣的同學，可以參考下2021-05-05
Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在現(xiàn)代的Web應(yīng)用中,用戶體驗至關(guān)重要,而提供簡單易用的復(fù)制功能是改善用戶體驗的一項關(guān)鍵功能,本文將為大家詳細介紹Vue實現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ，詳細的介紹了actions和mutation的使用和區(qū)別，非常具有實用價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
這篇文章主要介紹了vue動態(tài)綁定v-model屬性名方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
國密即國家密碼局認定的國產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03