為什么我有這個 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 錯誤。