在我的样式块中,我有这样的代码
<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命令行工具创建的
您可以使用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>