基于javascript变量的动态背景图片答案

【问题标题】：Dynamic background image based on javascript variable基于javascript变量的动态背景图片
【发布时间】：2020-10-16 01:03:24
【问题描述】：

在我的样式块中，我有这样的代码

<style lang="scss">
    .item {
        background: url('~@assets/images/i10.png');
    }
</style>

根据我的具体需求，我需要从注入 html 页面的 javascript 变量中加载图像。例如，在从服务器上来的 index.html 文件中，它可能是

itemURL = '/abc/def/def/img.png';

类似：

<style lang="scss">
    .item {
        background: url([window.itemURL);
    }
</style>

然后我需要将该网址用作项目的背景图片。

我无法使用 document.getElementBy(xyz)，因为项目正在动态加载/卸载到 DOM 中。

注意：它的 vuejs 项目是通过 vue 命令行工具创建的

【问题讨论】：

你在写.vue 文件，vue 组件吗？像这样的东西：vuejs.org/v2/guide/single-file-components.html
它的 .vue 文件！！！是的，单个文件组件

标签： javascript css vue.js webpack

【解决方案1】：

你可以使用img标签代替css样式

<template>
  <div>
      <img
        :src="url"
      >
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: null
    }
  },
  mounted() {
    this.url = injectImageUrl() // js function to inject url
  }
}
</script>

【讨论】：

【解决方案2】：

也许你可以使用道具？但我认为不可能从样式标签内部访问道具。做到这一点的唯一方法是使用内联样式。

<template>
  <div :style={ backgroundImage: 'url('+ imgUrl +')' }>
         
  </div>
</template>

<script>
  export default {
    props: {
      imgUrl: {
        type: String,
      }
    },
  }
</script>

【讨论】：