如何在 Nuxt.js 的内联样式中使用 background-image [英] How to use background-image in inline styles in Nuxt.js

问题描述

我有一个 .vue 文件，我想在其中使用内联样式

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>

使用标签 的图片显示正确，但标签

中的 background-image 显示不正确.

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

如何正确指定文件路径?

How do I specify the file path correctly?

推荐答案

真的没想到要主持这个，但这里是:https://codesandbox.io/s/so-nuxt-background-image-bf0ly?file=/pages/index.vue

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

确切的结构，相同的(ESlinted)模板，有效的解决方案.不能帮助超过这一点.

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')})` }">

require 在这里似乎是必需的，不知道为什么，但它有效.更多文档:https://nuxtjs.org/docs/2.x/directory-structure/assets/#images

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

这篇关于如何在 Nuxt.js 的内联样式中使用 background-image的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！