背景圖像：url() 在打字稿中不起作用？

Question

在我的 rails 項目中，我嘗試在用戶單擊時隱藏和顯示圖像，這是我的代碼：

$(document).ready(function() {
  if ($("#myvideo").prop('muted', true)){
    $("#mute").css("background-image","asset_url(mute.svg)");
  }

$("#mute").click( function (){
  if( $("#myvideo").prop('muted') ) {
    $("#myvideo").prop('muted', false);
    $("#mute").css("background-image","url(app/assets/icons/speaker.svg)");
  } else {
    $("#myvideo").prop('muted', true);
    $("#mute").css("background-image","url('mute.svg')");
  }
});
});

這些嘗試都$("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)");但是當我放置一個像$("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)"); 沒關系，

編輯：也試過：

$("#mute").css("background-image","url(<%= asset_path 'mute.svg' %>)");

但它不起作用

有誰知道為什么？ 以及如何修復它？

Answer 1

這並不像你想的那么簡單。

您需要使用asset_path從服務器加載圖像。

在此處查看文檔https://guides.rubyonrails.org/asset_pipeline.html

Answer 2

如果這對你有用，那意味着你的圖像路徑有問題

$("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)");

有兩種方法：通過asset_path獲取您的應用程序路徑然后

$("#mute").css("background-image","url("+YOUR_ASSET_PATH+"assets/icons/speaker.svg)");

或嘗試

$("#mute").css("background-image","url(/assets/icons/speaker.svg)");

Answer 3

在app/assets/images文件夾中移動/復制 mute.svg，然后使用下面的代碼訪問它

$("#mute").css("background-image","url('/assets/mute.svg')"