为什么我有这个 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

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

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