[SOLVED] How to use background-image in inline styles in Nuxt.js

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?

Solution

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