es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo usar background-image de Tailwind en SvelteKit

02 Aug, 2023 Programación

https://tailwindcss.com/docs/background-image#arbitrary-values

Así es como quiero utilizar la función de imagen de fondo de Tailwind. Esto no funciona con SvelteKit next 160 y Tailwind 3.0.9.

Código:

<script>
  import globe from '$assets/bg/bg_globe2.png'
</script>

<div class="flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('{$globe}')]">
  //children
</div>

La clase bg-[right_-14rem_bottom_-10rem] funciona sin problemas, así que supongo que Tailwind tiene problemas con las rutas de archivo de Svelte?

EDIT:
La salida de console.log(globe) es src/assets/bg/bg_globe2.png.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basado en el código proporcionado, parece haber un problema con la forma en que se utiliza la ruta de la imagen en la clase bg-[url()] con Tailwind y SvelteKit. La salida de console.log(globe) indica que la ruta de la imagen es src/assets/bg/bg_globe2.png, la cual es una ruta relativa.

    Para solucionar el problema, intenta utilizar la sintaxis import.meta en SvelteKit para obtener la ruta correcta de la imagen:

    <script>
  const globe = import.meta.env.BASE_URL + "assets/bg/bg_globe2.png";
</script>

<div class="{`flex" flex-col="" bg-primary-dark="" h-64="" overflow-hidden="" bg-no-repeat="" bg-[right_-14rem_bottom_-10rem]="" bg-[url('${globe}')]`}="">
  <!-- hijos -->
</div>

    Usar import.meta.env.BASE_URL te dará la URL base de tu aplicación SvelteKit, la cual luego puedes concatenar con la ruta relativa de la imagen para obtener la URL absoluta correcta.

    Esperemos que esta solución funcione para ti.

Comments are closed.