我想通过Vue.js设置一个div的背景图像。我试过这个方法,但是没有用。我一直这样做到现在:
在我的网页中显示方式:
uwopmtnx1#
编辑:请注意你的方法确实有效,只是你没有设置div的宽度和高度,所以它没有出现在屏幕上。Working here不过,如果您只需要使用动态url设置backgroundImage,我还是会采用下面的方法。[选项API];
<template> <div :style="{ backgroundImage: `url(${imageUrl})`, width: '100px', height: '100px', }" ></div> </template> <script> export default { name: "App", data() { return { imageUrl: "Your image url", }; }, }; </script>
或者使用合成API [脚本设置]
<script setup> import { ref } from "vue"; const imageUrl = ref( "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" ); </script> <template> <div :style="{ backgroundImage: `url(${imageUrl})`, width: '100px', height: '100px', }" ></div> </template>
1条答案
按热度按时间uwopmtnx1#
编辑:请注意你的方法确实有效,只是你没有设置div的宽度和高度,所以它没有出现在屏幕上。
Working here
不过,如果您只需要使用动态url设置backgroundImage,我还是会采用下面的方法。
[选项API];
或者使用合成API [脚本设置]