使用javascript切換背景圖片會強制使用絕對路徑

Question

我有一個div，其開頭如下：

<div id="info_picture" style="background-image: url('assets/img/channels/banners/3')"></div>

該圖像沒有文件擴展名的原因是它可以由用戶上傳，並且我不想將該擴展名存儲在數據庫中（或強制他們僅使用一種圖像格式）。 我有一行JavaScript可以更改此背景圖片：

info_picture.style.backgroundImage = "url('assets/img/channels/banners/"+channel+"')";

但是，在檢查元素時，背景圖像樣式顯示為絕對路徑，而不是我在腳本中指定的相對路徑。 這是一個問題，因為沒有擴展名，將導致它與應用程序/八位位組流一起傳輸。 然后chrome發出警告，並且圖像不顯示。 如何強制它加載相對路徑而不是絕對路徑？

Answer 1

我的直覺說這不是JavaScript問題或瀏覽器問題。

問題可能出在實際文件中，並且該文件實際上具有application / octet-stream作為mime類型。

如果我是你，

1. 我不會使用資產目錄來提供圖片。 我的選擇至少是public / images目錄。 資產不是用於動態文件，而是用於靜態文件。

2. 如果圖像是從不帶擴展名的服務器提供的，那么我會通過在控制器中正確設置mime類型來猜測應用程序提供的圖像，以為您使用了rails。

Answer 2

我不知道您的文件夾結構，但是您可以相對要從執行代碼所在的位置開始的每個文件夾使用“ ../”。

嘗試：

info_picture.style.backgroundImage = "url('../assets/img/channels/banners/"+channel+"')";

並查看路徑將如何改變。