在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
更新時間：2024年09月26日 10:38:11 作者：碼農褚
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源
在 Vue 項目中引用 assets 文件夾中的圖片可以通過以下幾種方式：
一、在模板中引用
在.vue文件的模板部分，可以使用相對路徑來引用圖片。例如：
<template> <img src="@/assets/image.jpg" alt="描述圖片的文本"> </template>
這里@是 Vue CLI 中配置的別名，指向src目錄。所以@/assets/image.jpg就表示在src目錄下的assets文件夾中的image.jpg圖片。
二、在 CSS 中引用
在 CSS 文件中，可以使用相對路徑來引用圖片作為背景圖像等。例如：
.class-name {
background-image: url('~@/assets/image.jpg');
}同樣，這里的~@/assets/image.jpg表示引用src目錄下assets文件夾中的圖片。
三、在 JavaScript 中引用
在 Vue 組件的腳本部分，可以使用import語句來導入圖片資源，然后在需要的地方使用。例如：
import image from '@/assets/image.jpg';
export default {
data() {
return {
imgSrc: image,
};
},
};然后在模板中可以使用v-bind綁定這個變量來顯示圖片：
<template> <img :src="imgSrc" alt="描述圖片的文本"> </template>
到此這篇關于在 Vue 項目中如何引用 assets 文件夾中的圖片(方式匯總)的文章就介紹到這了,更多相關vue 引用 assets 文件夾中的圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue項目部署到IIS后，刷新報錯404,這里需要用到URL重寫工具?--URL?Rewrite，需要的話需要自己下載安裝，本文通過圖文并茂的形式給大家介紹的非常詳細，需要的朋友可以參考下2022-10-10
在 Vue3 前端項目中,當用戶在長列表 / 長內容頁面滾動瀏覽后,切換到其他頁面再返回,或刷新當前頁面時,滾動條會默認回到頂部,體驗較差,本文將分享一種基于 ref 引用 + 本地存儲的方案,實現滾動位置的記憶與恢復,需要的朋友可以參考下2026-03-03
在Vue3中,導航守衛(wèi)（Navigation Guards）用于在路由切換前后執(zhí)行一些操作,例如驗證用戶權限、取消路由導航等,本文主要為大家介紹了vue3中導航守衛(wèi)的使用方法,需要的可以參考下2023-08-08
Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實例
這篇文章主要為大家介紹了Electron采集桌面共享和系統(tǒng)音頻(桌面捕獲)實現示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要給大家介紹了關于利用vue-i18n實現多語言切換效果的方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue-i18n具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
Vue+elementUI?el-input輸入框手機號校驗功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機號校驗功能,限制input框內只能輸入數字,且為11位,通過實例代碼介紹了對輸入手機號做校驗的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
今天小編就為大家分享一篇vue 2.8.2版本配置剛進入時候的默認頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3+TypeScript封裝axios并進行請求調用的實現
這篇文章主要介紹了Vue3+TypeScript封裝axios并進行請求調用的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
Vite 是一個面向現代瀏覽器的更輕,更快的web應用開發(fā)工具,下面這篇文章主要給大家介紹了關于如何使用vite搭建vue3項目的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue cli 3.x 項目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04