CODEWITHSUNDEEP
htmlvue.jsnuxt.jstailwind-css
Maxime
Maxime

Reputation: 357

Background image not displaying in a TailwindCSS + Nuxt project

I am trying to display a background image in a Nuxt/Tailwind application. The image is in the assets/images/ folder. This is my div =>

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

The image doesn't show. In my inspector I have


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

and if I hover on the link ~assets/images/my_image.png I see

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

My guess is that the Rendered size: 1 x 1 px means the image isn't rendered. How can I display a background image without inserting that image in the tailwind.config.js file ??

Upvotes: 0

Views: 1632

Answers (3)

syam s menon
syam s menon

Reputation: 1

This code is worked for me.Normal Url only work for online images.For local images, should use require.

<div
  class="h-72"
  :style="{
    'background-image': `url(${require('../static/assets/Rectangle.svg')})`,
  }"
></div>

Upvotes: 0

ConstanceHermit
ConstanceHermit

Reputation: 1

This solution worked for me:

<div class="w-full h-405" :style="{'background-image': `url(${require('@/assets/images/my_image.png')})`}">
  some text/string
</div>

It seems that using -assets/image.png triggers Webpack for the src: attribute, but not for the background-image: attribute.

Upvotes: 0

Maxime
Maxime

Reputation: 357

I have removed the image files from the assets folder and put them in the static folder. To use them in Nuxt, I called them like this

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

images is the folder containing my images in the static folder.

Upvotes: 1

Related Questions