为什么我有这个 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"；(没有斜线和点(表示相对位置
• 你的风格更新了吗？尝试shift+f5
• 如果上面列出的都不起作用，请按F12并检查错误消息。也许这不是404错误