vue3 动态获取图片地址

<template>
   <defs>
    <pattern id="bg-pattern" patternUnits="objectBoundingBox" width="100%" height="100%">
         <image :href="bgHref" preserveAspectRatio="none"></image>
    </pattern>
   </defs>
</template>


<script setup>

import {  watchEffect } from "vue";

import { storeToRefs } from "pinia";

import { useDyqkStore } from "@/store/yuan.js";

let { markNumber } = storeToRefs( useDyqkStore());

import csdt from "@/assets/images/yuan/csdt.png";
import fddt from "@/assets/images/yuan/fddt.png";
import gfdt from "@/assets/images/yuan/gfdt.png";
import sddt from "@/assets/images/yuan/sddt.png";
import hddt from "@/assets/images/yuan/hddt.png";

let bgHref = ref("");

watchEffect(() => {
  bgHref.value = getMapBg(markNumber.value);
});


function getMapBg(markNumber) {
  let bgObj = {
    1: csdt,
    2: fddt,
    3: gfdt,
    4: sddt,
    5: hddt,
  };
  return bgObj[markNumber];
}

</script>