带有背景图像的 Vue3 样式指令产生 404 错误

Posted 2023-02-22

【中文标题】带有背景图像的 Vue3 样式指令产生 404 错误

【英文标题】：Vue3 style directive with background-image produces 404 Error

【发布时间】：2021-12-14 08:23:32

【问题描述】：

我正在分配从 database 到 axios.get 获取的反应性 image link，如下所示：

<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？

在将console.log(state.articles.image[0]) 发送到template 之前运行会生成正确的图像链接：

storage/brrAlEXfmEvoqjXiRhgalgzT9f2MfbX07Q4wDL0i.jpg

即使我在模板中输出链接（例如在 h-tag 中），它也会显示正确的链接，那么有什么问题？

【参考方案1】：

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

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