Rails Active Storage - недопустимое свойство фонового изображения?

Итак, в моем приложении у меня есть карточка, на которой я хочу динамически установить фоновое изображение через ActiveStorage следующим образом:

  <div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">

 </div>

однако изображение не видно. Внутри chrome я также получаю свойство element.style "invalid type property" как ошибку.

Если я проверяю элемент карты, URL-адрес загружается следующим образом:

`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`

Взяв URL-адрес и добавив к нему localhost: 3000, загрузите изображение:

localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png

Рендеринг изображения внутри тега img нормально работает:

<%= image_tag(post.images.first) %>

Кроме того, изменениеrails_blob_path на rails_blob_url не имеет никакого значения. Единственное изменение заключается в том, что к URL-адресу в rails_blob_url добавлен localhost: 3000:

http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png

Добавление высоты / ширины к классу карты также не приводит к разнице.

Вот ссылка, которую я нашел, похоже, они используют тот же подход, что и я: Ruby on rails 5.2 - фоновое изображение с активной памятью

Есть идеи, где может быть проблема?

Заранее всем спасибо!

Привет!


ruby-on-rails rails-activestorage
person Prometheus    schedule 19.02.2019    source источник
comment
Попробуйте удалить косую черту, взгляните на stackoverflow.com/ questions / 22075730 /   -  person Nick Roz    schedule 19.02.2019
comment
Вы пытаетесь сделать изображение загружаемым или просто показать его?   -  person hashrocket    schedule 19.02.2019
comment
Загрузка не требуется. Изображение должно быть установлено как фон div, как показано выше. Рендеринг изображения с помощью image_tag работает, и получение URL-адреса загрузки также работает. У этого есть что-то с CSS, которое я думаю, и способ ввода URL-адреса фонового изображения.   -  person Prometheus    schedule 19.02.2019

Ответы (1)


arrow_upward
5
arrow_downward

Спасибо всем за ваш вклад!

Я смог это исправить. На всякий случай, если кто-то столкнется с такой же проблемой:

Добавьте одинарные кавычки к своему пути:

Решение:

 <div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">

Для сравнения (ранее):

 <div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">

Двойные кавычки в этом примере не работают.

Это, вероятно, даже не было бы проблемой, если бы я просто использовал файл scss вместо того, чтобы добавлять его непосредственно в div.

Ваше здоровье!

person Prometheus    schedule 19.02.2019