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

Question

This is fine:这可以：

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

but, I do get a 404 when trying to refer to an image using this method:但是，当尝试使用此方法引用图像时，我确实得到了 404：

index.html

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

css

background-image: var(--url);

It works fine in local server, but when it's deployed, it won't work.它在本地服务器上工作正常，但部署后，它就无法工作。

Note:笔记：

I'm not trying to access the root.我没有尝试访问根目录。 The path given is correct.给出的路径是正确的。
I do not manage the back-end, I use Netlify .我不管理后端，我使用Netlify 。

I believe it has something to do with cdn that is configured by netlify and so far my solution is to provide full path: https://example.com/parent/child/image.jpg我相信它与netlify配置的cdn有关，到目前为止我的解决方案是提供完整路径： https://example.com/parent/child/image.jpg

The 404 error on dev tools console shows a cdn link — I believe:开发工具控制台上的 404 错误显示了一个 CDN 链接——我相信：

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

instead of:代替：

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

Please enlighten me.请赐教。

Answer 1

If it works on the local server there must be a problem with the image or the server, not the code.如果它在本地服务器上工作，则一定是图像或服务器有问题，而不是代码。

Can you access the image directly from your web browser?您可以直接从 web 浏览器访问图像吗？
Double check if the server's folder structure is the same local server's folder structure.仔细检查服务器的文件夹结构是否与本地服务器的文件夹结构相同。 Also, usually we use "/" to specify root folder or "dir" (without slash and dot) for relative location.此外，通常我们使用“/”来指定根文件夹或“dir”（不带斜线和点）作为相对位置。
Are your styles updated?你的 styles 更新了吗？ Try shift+f5试试 shift+f5
If nothing listed above will work, press F12 and check the error message.如果上面列出的都不起作用，请按 F12 并检查错误消息。 Maybe it's not a 404 error.也许这不是 404 错误。