如何在 Nuxt.js 中的内联样式中使用背景图像

Question

我有一个.vue文件想要使用内联样式

<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>

使用标签的图像<img>可以正确显示，但background-image在标签中<li>则无法正确显示。

如何正确指定文件路径？

Answer 1

编辑：真的没想到必须托管这个，但它是： https: //codesandbox.io/s/so-nuxt-background-image-bf0ly ?file=/pages/index.vue

精确的结构，相同的（ESlinted）模板，工作解决方案。无法超越这一点。

我不确定这是否是通用解决方案，但这对我来说很有效

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

这里似乎require需要，不知道为什么，但它有效。文档中的更多内容：https://nuxtjs.org/docs/2.x/directory-struct/assets/#images