Vue中定義src在img標(biāo)簽使用時加載不出來的解決
Vue中定義src在img標(biāo)簽使用時加載不出來
問題
路徑正確,但是圖片加載不出來,如下示例:
<!--vue3的語法,vue2類似--> <template> <img :src=""/> </template> <script setup> import {ref} from 'vue'; const src = ref('圖片路徑'); </script>
代碼和路徑都沒問題,發(fā)現(xiàn)圖片并未顯示
解決一:使用require引入圖片(commonJs語法)
如果項目中使用的是vite,vite中是不支持require引用的??刂婆_報錯:require is not defined
這個時候就需要下載commonJs包
// 下載安裝commonjs包--vite3 yarn add vite-plugin-commonjs // vite2中可以安裝這個 npm i @rollup/plugin-commonjs //2.在vite.config.ts配置中添加該插件(如果是js就換成js版的) import commonjs from '@rollup/plugin-commonjs'; const plugins = [ commonjs() as any,// 要放在第一行,否則不生效 ];
解決二(使用vite的話,推薦這種方案)
// import.meta.url是當(dāng)前模塊的url,和圖片的相對路徑合并就是一個完整的URL const list = ref( [{ src: new URL('相對路徑', import.meta.url).href, }] )
Vue中img標(biāo)簽的src屬性總結(jié)
初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,咱們廢話不多說,開整!!!
img標(biāo)簽引用資源圖片
一般不需要webpack處理的資源放在static,需要經(jīng)過處理的放在assets
1.不需要webpack處理的圖片放在static
不需要webpack處理的圖片,直接使用絕對路徑調(diào)用圖片,如"/static/xx/xxx.png"
栗子
- html代碼
<img v-bind:src="imgUrl"/>
- js代碼
data(){ return{ imgUrl:"/static/logo.png" } }
成功讀取到了logo.png. 執(zhí)行npm run build后查看dist文件,發(fā)現(xiàn)logo.png原封不動地放在了根目錄下。
2.需要webpack處理的圖片放在assets
可以使用import還是require進行引入.import為es6語法,require為commonJS形式.
- 栗子1
<img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
- 栗子2
<img :src="require('@/assets/images/sidederLogo.png')" class="sidebar-logo">
- 栗子3
//HTML1 <img class="logo-img" :src="imgUrl" alt="logo" /> //JS data(){ return{ imgUrl:require('./assets/logo.png') } }
也可以直接引用網(wǎng)絡(luò)路徑
//HTML1 <img class="logo-img" :src="imgUrl" alt="logo" /> //JS data(){ return{ imgUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' } }
最后
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue入門之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01vue3清空let?arr?=?reactive([])的實現(xiàn)示例
本文主要介紹了vue3清空let?arr?=?reactive([])的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-03-03vue學(xué)習(xí)之Vue-Router用法實例分析
這篇文章主要介紹了vue學(xué)習(xí)之Vue-Router用法,結(jié)合實例形式分析了Vue-Router路由原理與常見操作技巧,需要的朋友可以參考下2020-01-01Vue.js中computed屬性高效的數(shù)據(jù)處理案例
computed是Vue中一個計算屬性,它可以根據(jù)依賴的數(shù)據(jù)動態(tài)計算出一個新的值,并將其緩存起來,這篇文章主要給大家介紹了關(guān)于Vue.js中computed屬性高效的數(shù)據(jù)處理的相關(guān)資料,需要的朋友可以參考下2024-09-09elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08