Estoy tratando de agregar un enlace para una imagen de fondo usando la sintaxis css de viento de cola. El project.pic es una cadena de un enlace guardado en imgur. Si uso una etiqueta img y el atributo src, la imagen se carga. Me gustaría usar el div que he configurado. He probado las 3 opciones siguientes sin ningún éxito. ¿Cómo puedo pasar la ruta imgur a bg-[url(path)] correctamente?

project.pic = 'https://i.imgur.com/JdgrfD5.png'

 <div class="bg-[url(<%= project.pic %>)] bg-center bg-no-repeat bg-cover h-[40vh]"> </div>

 <div class="bg-[url("<%= project.pic %>")] bg-center bg-no-repeat bg-cover h-[40vh]"> </div>

 <div class="bg-[url('<%= project.pic %>')] bg-center bg-no-repeat bg-cover h-[40vh]"> </div>