nuxtjs - 将背景 url 设置为来自资产的图像不起作用 [英] nuxtjs - setting background-url to image from assets doesn't work

问题描述

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

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

<p>{{ previewText }}</p>

我像这样传递它(缩略图):~assets/images/postPreview.jpg 并得到上述错误.

如果我像这样传递它，那么它就可以工作:_nuxt/assets/images/postPreview.jpg

我也试过这个但它不起作用.

谁能帮助我了解问题所在?

解决方案

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

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

在您的数据对象中:

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

after lots of research I haven't found a solution which explains why this is happening.

When trying to set the background-image in my div dynamically it doesn't work and I am getting an 404 error. 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>

I am passing it like this (thumbnail): ~assets/images/postPreview.jpg and get the above error.

If i pass it like this then it works: _nuxt/assets/images/postPreview.jpg

I have tried this one as well but it doesn't work.

Can anyone help me out understand what is the issue?

解决方案

Your images should be placed inside static folder then use them like

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

in your data object :

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

这篇关于nuxtjs - 将背景 url 设置为来自资产的图像不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！