Vue3 动态加载修改背景图片

使用Vite时，无法再使用 require , 只支持ESM规范

ESM

ESM即ES6 module，在 ES6 之前，JavaScript社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和 AMD/CMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

ESM规范指令很简单，只有三个：import，export，export default。
export\export default 用来导出模块接口，import用来引入模块接口。

在template 中使用

<img src="../assets/images/a1.png" />

在 JS 中使用

<template>
    <van-icon class="input-icon" :name="accIcon" color="#FABD1F" size="22px" />
</template>
 
<script lang="ts">
import accIcon from "@images/a1.png";
import passIcon from "@images/a2.png";
 
export default defineComponent({
    setup(){
        return { accIcon, passIcon };
    }
})
</script>

vue3 可直接在style标签中使用v-bind绑定动态值

<template>
  <div class="preview_wrapper">
    <span>测试文字</span>
  </div>
</template>

<script setup>
const color = ref('blue')
const size = ref('18px')
//修改
const toggle = () => {
  color.value = 'red'
  size.value = '24px'
}
</script>

<style lang="scss">
span {
  font-size: v-bind(size);
  color: v-bind(color);
}

使用如下解决

<div
    :style="{
      backgroundImage: `url(${test})`,
    }"
  >
</div>

const test = ref()
watchEffect(async () => {
  test.value = (await import('./bg/image.png')).default
})