Imágenes dinámicas usando CSS

(es)

rubycssjquery

Necesitaba agregar una imagen y texto en un popover de bootstrap, parecía sencillo, pero no podía manipular el DOM dentro del elemento y la imagen debia ser dinámica. El popover no me permite agregar el action view helper image_tag.

  const content =`<div class="media">
<img src="/assets/image.png" alt="Sample Image">
<div class="media-body">
<h5 class="media-heading">Title</h5>
<p>Description</p>
</div>
</div>
`


$('[data-toggle="popover"]').popover({
placement : 'right',
trigger : 'hover',
html : true,
content
});

Para resolverlo cree un div y con CSS cree el espacio donde estaría la imagen, en mi caso un cuadrado pequeño, y agregué a este cuadrado un background-image con image_url a la URL de la imagen que necesitaba.

  const content = `<div class="media">
<div class="square"></div>
<div class="media-body">
<h5 class="media-heading">Title</h5>
<p>Description</p>
</div>
</div>
`
  .square {
--size: var(--square-size);
height: var(--size);
width: var(--size);

background-image: image_url('image.png'); // Este es el helper de rails
}