'How to use background-image in inline styles in Nuxt.js

I have a .vue file where I want to use inline styles

<img src="~static/img/info/production/pic4.jpg" class="t22" />
<a href="/page/fresco-art" class="btn t23">First text</a>

<div class="hr t24"></div>
<h2 class="t25">Second text</h2>

<ul class="services">
  <li :style="{ backgroundImage: `url('~static/img/info/production/pic5.jpg')` }" class="sq">
    <div class="n">Third text</div>
  </li>
</ul>

The image using tag <img> is displayed correctly, but background-image in tag <li> is not.

How do I specify the file path correctly?

vue.jsvuejs2nuxt.js


Solution 1:[1]

EDIT: really did not expect to have to host this one but here it is: https://codesandbox.io/s/so-nuxt-background-image-bf0ly?file=/pages/index.vue

Exact structure, same (ESlinted) template, working solution. Cannot help beyond this point.

I'm not sure that it is the universal solution, but this one is working on my side

<li :style="{ backgroundImage: `url(${require('@/static/japan.jpg')})` }">

The require seems to be required here, not sure why but it works. More in the docs: https://nuxtjs.org/docs/2.x/directory-structure/assets/#images

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions