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

【问题标题】：How to use background-image in inline styles in Nuxt.js如何在 Nuxt.js 的内联样式中使用背景图像
【发布时间】：2021-05-27 12:45:28
【问题描述】：

我有一个.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>的图像显示正确，但标签<li>中的background-image则显示不正确。

如何正确指定文件路径？

【问题讨论】：

我的回答对您的问题有帮助吗？
@kissu 不，它对我不起作用。我使用了这个语法<li :style="{ backgroundImage: `url('/img/info/production/ser1.jpg')`}" class="sq">
请尝试使用 my 语法。
@kissu 我试过了对我没有帮助
很高兴我的回答有帮助。 :D

标签： vue.js nuxt.js

【解决方案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-structure/assets/#images

【讨论】：