Vue3的樣式指令使用background-image時產生404錯誤

Question

我正在透過 axios.get 從 database 取得反應式 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 標籤中），它也會顯示正確的鏈接，那麼有什麼問題嗎？

Answer 1

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