Vue3中样式动态绑定背景图的方法

参考：vue3 +vite +setup语法使用require报错https://www.jianshu.com/p/ce1edd7d1e39

引入图片资源方式一

<script setup>
import { ref } from "vue";
import imgUrl from "@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg";
const bgImg = ref("");
bgImg.value = imgUrl;
</script>

引入图片资源方式二

<script setup>
import { ref } from "vue";
const bgImg = ref("");
bgImg.value = new URL(
  "@/assets/28fc29c767c3dc8c75fbe6b284b5de1e.jpeg",
  import.meta.url
).href;
</script>

动态绑定背景图

<div
  :style="{
    backgroundImage: `url(${bgImg})`,
  }"
></div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容