我正在透過 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 標籤中),它也會顯示正確的鏈接,那麼有什麼問題嗎?
模板將在
state.articles.image[0]
已知之前呈現。 div 標籤被渲染,瀏覽器會嘗試取得尚未定義的undefined
背景圖片 url。解決此問題的一種方法是僅在狀態就緒時渲染<div>
。