Фоновое изображение не отображается в проекте TailwindCSS Nuxt

#html #vue.js #nuxt.js #tailwind-css

Вопрос:

Я пытаюсь отобразить фоновое изображение в приложении Nuxt/Tailwind. Изображение находится в assets/images/ папке. Это мой div =>

 <div class="w-full h-405" style="background-image: url('~assets/images/my_image.png');">
  some text/string
</div>

Изображение не отображается.
В моем инспекторе у меня есть

 
element.style {
    background-image: url(~assets/images/my_image.png);
}

и если я наведу курсор на ссылку ~assets/images/my_image.png , я увижу

 Rendered size:  1 × 1 px
Rendered aspect ratio:  1∶1
File size:  43 B
Current source: http://localhost:3000/~assets/images/my_image.png

Я предполагаю, что Rendered size: 1 x 1 px это означает, что изображение не отображается. Как я могу отобразить фоновое изображение, не вставляя его в tailwind.config.js файл ??

Ответ №1:

Я удалил файлы изображений из assets папки и поместил их в static папку. Чтобы использовать их в Nuxt, я назвал их так

 <div class="w-full h-405" style="background-image: url('/images/my_image.png');">
  some text/string
</div>

images это папка, содержащая мои изображения в static папке.