Vue3的樣式指令使用background-image時產生404錯誤
P粉186897465
P粉186897465 2024-03-29 10:09:48
0
1
414

我正在透過 axios.getdatabase 取得反應式 image 連結 ,如下:

<div class="main-image" :style="{'background-image': 'url(' + state.articles.image[0] + ')'}">

一切正常,div 的背景圖像已正確更改。唯一的問題是我的控制台拋出:

GET http://localhost:3000/undefined 404 (Not Found)

顯然這表明 url 沒有指向任何地方,但是當 background-image 正確顯示時,這怎麼可能呢?在我的CSS 中,我沒有設定background-image 屬性,只有background: no-repeat center 但即使我刪除這些錯誤仍然存在。有什麼想法如何擺脫 404 嗎?

在將template 傳送到template 之前執行console.log(state.articles.image[0]) 會產生正確的圖片連結:

storage/brrAlEXfmEvoqjXiRhgalgzT9f2MfbX07Q4wDL0i.jpg

即使我在模板中輸出鏈接(例如在 h 標籤中),它也會顯示正確的鏈接,那麼有什麼問題嗎?

P粉186897465
P粉186897465

全部回覆(1)
P粉156983446

模板將在 state.articles.image[0] 已知之前呈現。 div 標籤被渲染,瀏覽器會嘗試取得尚未定義的 undefined 背景圖片 url。解決此問題的一種方法是僅在狀態就緒時渲染 <div>

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板