提问者:小点点

基于javascript变量的动态背景图像


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

<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>

然后我需要使用这个url作为项目的背景图像。

我不能使用document.getElementBy(xyz),因为项目正在动态地加载/卸载到DOM中。

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


共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>

相关问题