Vue3의 스타일 지시문은 배경 이미지를 사용할 때 404 오류를 생성합니다.

Question

저는 아래와 같이 axios.get 从 database 获取反应式 image 链接 지나갑니다:

으아악

모든 것이 잘 작동하고 div의 배경 이미지가 올바르게 변경되었습니다. 유일한 문제는 내 콘솔에서 다음이 발생한다는 것입니다.

으아악

분명히 이것은 url 没有指向任何地方，但是当 background-image 正确显示时，这怎么可能呢？在我的 CSS 中，我没有设置 background-image 属性，只有 background: no-repeat center 但即使我删除这些错误仍然存​​在。有什么想法如何摆脱 404을 의미합니까?

추가한 후 template 发送到 template 之前运行 console.log(state.articles.image[0]) 올바른 이미지 링크가 생성됩니다:

으아악

링크를 템플릿(예: h 태그)에 출력해도 링크가 제대로 표시되는데 무엇이 문제일까요?

Answer 1

템플릿은 state.articles.image[0] 已知之前呈现。 div 标签被渲染，浏览器将尝试获取尚未定义的 undefined 背景图片 url。解决此问题的一种方法是仅在状态就绪时渲染 <div>에서 사용할 수 있습니다.

으아아아