He estado intentando agregar una imagen de fondo con la ayuda de Tailwind en mi proyecto, pero no funciona, supongo que se debe a un conflicto entre activos y canalizaciones en alguna parte.
Lo que he probado:
Insertando la imagen directamente en mi tailwind.config así:
'aceite-esencial': "url('/assets/images/aceite-esencial.png')", 'aceite-esencial': "url-activo('aceite-esencial.png')"
Insertando la imagen directamente en mi HTML con un estilo: "imagen-de-fondo:url(/assets/images/essential-oil.png)
Poner mi imagen en otro lugar de la aplicación como Público
Ninguna de las soluciones funciona. En el peor de los casos, todo mi estilo desaparece de mi HTML; en el mejor de los casos, el estilo se ve bien pero la imagen no está ahí.
¿Alguna idea?
Gracias.
En Rails SCSS se le permite usar image-url() en lugar de url. Esto asigna el archivo correcto después de compilar los activos. No estoy seguro de si su proceso de construcción de producción de viento de cola está incluido en su cartera de activos. Si no, tienes que poner la imagen dentro de tu carpeta pública.
- Simon Franzen
30 de marzo de 2021 a las 10:14
------------------------------------
Puedes hacer lo siguiente:
Mueva la imagen al directorio de canalización de activos app/assets.
Referirse ael nuevo activo en tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'essential-oil': "url('essential-oil.png')"
}
}
}
}
Consulte la imagen de fondo en el HTML.
<div class="bg-essential-oil">
</div>
Detalles
Esto funciona ya que Sprockets se cambió para admitir referencias de URL simples ([ruta-activo]) de huellas digitales. Consulte https://github.com/rails/sprockets-rails/pull/476. Asegúrate de tener Sprockets 3.3.0 o superior. Obtuve la respuesta después de abrir un problema en el repositorio tailwindcss-rails: https://github.com/rails/tailwindcss-rails/issues/137#issuecomment-1025853968.
Por extensión, también funciona poniendo la URL en línea:
<div class="bg-[url('essential-oil.png')]">Has the essential oil background</div>
Referencia
Guía de Rails: la canalización de activos
Respondido
31 de enero de 2022 a las 15:17
Antón Timmermans
Antón Timmermans
333
2
2 insignias de plata
8
8 insignias de bronce
------------------------------------
Mover imagen a la carpeta pública
Consulte la imagen en tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/assets/icon-arrows-left.svg')",
}
}
}
}
1
El problema con esto es que te pierdes la toma de huellas dactilares y el procesamiento del culo.La tubería no lo hace.
- Anton Timmermans
31 de enero de 2022 a las 12:58
------------------------------------
Las comillas simples son el estilo de ruta de tu imagen: "imagen de fondo:url('/assets/images/essential-oil.png')
ver https://github.com/rails/tailwindcss-rails/issues/129
Compartir
Seguir
Respondido el
6 de enero a las 23:03
ToddM
ToddM
101
1
1 insignia de bronce
