为什么我遇到这个 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 link — 我相信：

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 错误。