Ad

Background-image : Url() Not Working In Typescript?

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 ?

Ad

Answer

move/copy mute.svg inside app/assets/images folder, and you acccess it with this code below

$("#mute").css("background-image","url('/assets/mute.svg')"
Ad
source: stackoverflow.com
Ad