效果：

代码实现：

方式一、使用后端返回的url

<div v-for="(item, index) in bankList" :key="index" class="mx-4">
    <div
      class="flex justify-between items-center bg-[#fff] p-4 rounded-lg mb-4"
      @click="getPayMethod(item.bankSortName)"
    >
      <div class="flex items-center">
        <van-image
          class="mr-2"
          width="24"
          height="24"
          :src="item.imagesUrl"
          alt=""
        />
        <span class="text-base text-[#000]">{{ item.bankSortName }}</span>
      </div>
      <van-icon name="arrow" />
    </div>
</div>

后端返回图片的url地址，直接van-image标签的src属性绑定imagesUrl

方式二、使用require动态拼接

<van-image
  class="mr-2"
  width="24"
  height="24"
  :src="require(`@/assets/images/${item.imagesName}.png`)""
  alt=""
/>

bankList: [
    {
      imagesName: "payVa",
      bankSortName: this.$t("cashier.VirtualAccount"),
    },
    {
      imagesName: "payWallet",
      bankSortName: this.$t("cashier.Ewallet"),
    },
    {
      imagesName: "payRO",
      bankSortName: this.$t("cashier.retail"),
    },
    {
      imagesName: "payQRIS",
      bankSortName: this.$t("cashier.QRIS"),
    },
  ];

方式三、import先引入

<van-image
  class="mr-2"
  width="24"
  height="24"
  :src="item.imagesName"
  alt=""
/>

import payVa from "@/assets/images/payVa.png";
import payWallet from "@/assets/images/payWallet.png";
import payRO from "@/assets/images/payRO.png";
import payQRIS from "@/assets/images/payQRIS.png";

bankList: [
    {
      imagesName: payVa,
      bankSortName: this.$t("cashier.VirtualAccount"),
    },
    {
      imagesName: payWallet,
      bankSortName: this.$t("cashier.Ewallet"),
    },
    {
      imagesName: payRO,
      bankSortName: this.$t("cashier.retail"),
    },
    {
      imagesName: payQRIS,
      bankSortName: this.$t("cashier.QRIS"),
    },
  ];

我这里使用的是先用import导入，因为打包vite不支持require，会报错，使用import先导入可以解决这个问题，

另外在处理过程中使用过require，解决报错问题，在vite社区下载过插件vite-plugin-require-transform，动态拼接也尝试过好多拼接方式，最终繁琐且不稳定报错，失败告终，如果是简单的引入本地图片，使用require，不涉及到动态拼接问题，可以尝试下这个插件。

vitejs/ awesome-vite - github地址： https://github.com/vitejs/awesome-vite

搜索require，选择

先安装

yarn add -D vite-plugin-require-transform
or
npm i vite-plugin-require-transform --save-dev

然后vite.config.js中配置

先引入import requireTransform from "vite-plugin-require-transform";再plugins配置requireTransform

import vue2 from "@vitejs/plugin-vue2";
import requireTransform from "vite-plugin-require-transform";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue2(),
    legacy({
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    }),
    requireTransform({
      fileRegex: /.js$|.jsx$|.vue$/,
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

尝试：

1、报错，把普通字符串改成了模板字符串（``）反引号不能使用

<van-image
  class="mr-2"
  width="24"
  height="24"
  :src="require(`@/assets/images/${item.imagesName}.png`)""
  alt=""
/>

2、不报错，不加载图片

<van-image
  class="mr-2"
  width="24"
  height="24"
  :src="require('@/assets/images/${item.imagesName}.png')""
  alt=""
/>

3、如果只是简单引入本地图片,这样是可以的

<van-image
  class="mr-2"
  width="24"
  height="24"
  :src="require('@/assets/images/payVa.png')""
  alt=""
/>

在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换，vite却不能使用

另外，尝试过把images 放在public目录下面，利用环境变量https请求，这种方式也可以解决vite不支持require问题

代码：

<van-image
  class="mt-20 mb-4"
  width="80"
  height="80"
  :src="getImageUrl(imageName)"
  alt=""
/>

getImageUrl(name) {
  return new URL(
    import.meta.env.BASE_URL + "/images/" + name + ".png",
    import.meta.url
  ).href;
},