nuxtjs - 将 background-url 设置为资产中的图像不起作用答案

【问题标题】：nuxtjs - setting background-url to image from assets doesn't worknuxtjs - 将 background-url 设置为资产中的图像不起作用
【发布时间】：2021-04-28 08:07:01
【问题描述】：

经过大量研究，我还没有找到解释为什么会发生这种情况的解决方案。

当尝试在我的 div 中动态设置 background-image 时，它不起作用，并且出现 404 错误。 http://localhost:3000/~assets/images/postPreview.jpg 404 (Not Found)

<div
    class="post-thumbnail"
    :style="{backgroundImage: 'url(' + thumbnail + ')'}"></div>
     <div class="post-content">
          <h1> {{ title }}</h1>
          <p> {{ previewText }}</p>
      </div>
</div>

我这样传递它（缩略图）：~assets/images/postPreview.jpg 并得到上述错误。

如果我像这样通过它，那么它可以工作：_nuxt/assets/images/postPreview.jpg

我也试过this one，但没用。

谁能帮我弄清楚问题出在哪里？

【问题讨论】：

标签： javascript vue.js webpack nuxt.js

【解决方案1】：

你的图片应该放在静态文件夹中，然后像这样使用它们

:style="{backgroundImage: 'url(' + thumbnail + ')'}"></div>

在您的数据对象中：

thumbnail :this.$router.options.base+'images/postPreview.jpg'

【讨论】：