为什么我有这个 css 背景图像参考问题？

Question

这可以：

background-image: url(./dir/img.jpg);

但是，当尝试使用此方法引用图像时，我确实得到了 404：

index.html

<div style="--url: url(./dir/img.jpg);"></div>

css

background-image: var(--url);

它在本地服务器上工作正常，但部署后，它就无法工作。

笔记：

• 我没有尝试访问根目录。 给出的路径是正确的。
• 我不管理后端，我使用Netlify 。

我相信它与netlify配置的cdn有关，到目前为止我的解决方案是提供完整路径： https://example.com/parent/child/image.jpg

开发工具控制台上的 404 错误显示了一个 CDN 链接——我相信：

Error: https://d33wubrfki0l68.example.net/parent/child/image.jpg
Works: https://d33wubrfki0l68.example.net/parent/child/[somehashes–idk]/image.jpg

代替：

https://example.com/parent/child/image.jpg

请赐教。

Answer 1

如果它在本地服务器上工作，则一定是图像或服务器有问题，而不是代码。

• 您可以直接从 web 浏览器访问图像吗？
• 仔细检查服务器的文件夹结构是否与本地服务器的文件夹结构相同。 此外，通常我们使用“/”来指定根文件夹或“dir”（不带斜线和点）作为相对位置。
• 你的 styles 更新了吗？ 试试 shift+f5
• 如果上面列出的都不起作用，请按 F12 并检查错误消息。 也许这不是 404 错误。