background-image: 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')");
  }
});
});

, ни одна из этих попыток не работает, но когда я добавляю URL-адрес типа $("#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

Если это работает для вас, это означает, что у вас проблема с путем к изображению

$("#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 2

переместите / скопируйте mute.svg в папку app / assets / images , и вы получите доступ к этому коду ниже

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

Answer 3

Это не так просто, как вы думаете.

Вам необходимо загрузить изображения с сервера с помощью asset_path.

См. Документы здесь https://guides.rubyonrails.org/asset_pipeline.html