切換背景圖片與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+"')"; 

然而，在檢查元素，背景圖像風格表現爲絕對路徑，而不是我在腳本中指定的相對路徑。這是一個問題，因爲沒有擴展名，導致它與application/octet-stream一起傳輸。然後，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+"')"; 

然後看看路徑將如何改變。