通过Vue.js的指令添加背景图像

a14dhokn  于 2023-01-17  发布在  Vue.js
关注(0)|答案(1)|浏览(104)

我想通过Vue.js指令得到一个背景图像我正在阅读这个博客,但在我的项目不工作enter link description here
我试过一些方法,但不起作用。我一直这样做,直到现在:

在我的网页中显示方式


任何人都可以帮助我如何显示背景图像通过指令的Vue.js?看起来不错。谢谢

0sgqnhkj

0sgqnhkj1#

编辑:请注意你的方法确实有效,只是你没有设置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>

相关问题