background-image : url() not working in typescript?

Question

In my rails project I try to hide and show an image when a user click on it, here is my code :

$(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')");
  }
});
});

none of this try works but when I put an url like $("#mute").css("background-image","url(https://www.svgrepo.com/show/170684/mute-volume-control.svg)"); it's ok,

Edit : also tried :

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

but it doesn't work

Anyone knows why ? And how to fix it ?

Answer 1

It is not simple as you think.

You need load images from server with asset_path .

See docs here https://guides.rubyonrails.org/asset_pipeline.html

Answer 2

If this works for you thats mean you've problem in your image path

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

there two ways: get your app path by asset_path then

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

OR try

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

Answer 3

在app/assets/images文件夹中移动/复制 mute.svg，然后使用下面的代码访问它

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