如何将动态内联样式设置为：在 vue 中的元素之后？答案

【问题标题】：how can I set dynamic inline-style to :after of an element in vue?如何将动态内联样式设置为：在 vue 中的元素之后？
【发布时间】：2021-11-08 10:39:03
【问题描述】：

我的问题是我想动态加载一个 div image-background。我该怎么做？

<div
      class="sub-service-box"
      v-for="item in serviceCategories[itemIndex].services"
      :key="item._id"
    >
      <div
        class="background-img"
        :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
      >
      </div>

    </div>

serviceCategories[itemIndex].services 是一个来自 API 的数组

【问题讨论】：

您的代码似乎没有问题。你确定item.imageUrl 加载任何图片吗？
这能回答你的问题吗？ CSS set background-image by data-image attr
由于您不能直接设置伪元素的样式，因此您需要将其传递给具有 URL 设置的 CSS 变量。
看完这个part就可以解决这个问题了

标签： css vue.js nuxt.js

【解决方案1】：

imageUrl 是远程 https url，还是项目中静态资产的路径？

如果是远程 url，你的代码看起来不错。

如果它是您项目中的静态资产，您必须像这样require它：

<div
  class="sub-service-box"
  v-for="item in serviceCategories[itemIndex].services"
   :key="item._id"
>
  <div
    class="background-img"
     :style="{ backgroundImage: 'url(' + require(item.imageUrl) + ')' }"
  >
  </div>
</div>

【讨论】：