搜索

首页  >  问答  >  正文

Vue3的样式指令使用background-image时产生404错误

我正在通过 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粉186897465P粉186897465271 天前457

全部回复(1)我来回复

  • P粉156983446

    P粉1569834462024-03-30 00:42:17

    模板将在 state.articles.image[0] 已知之前呈现。 div 标签被渲染,浏览器将尝试获取尚未定义的 undefined 背景图片 url。解决此问题的一种方法是仅在状态就绪时渲染 <div>

    回复
    0
  • 取消回复