今天做项目的时候遇到了一个需求：
有五类危险物品，每个危险物品都有五个级别，UI针对每个级别都给了我们图，有一个接口，接口中会给我们返回每类危险品的级别，我们该怎么根据接口的字段来加载不同的图片呢，

方法一：

有一种方法是，引入5*5 = 25 张背景图片
引入方法如下：

import pic1 from '../asset/images/pic1'
import pic2 from '../asset/images/pic2'
import pic3 from '../asset/images/pic3'
const arr = [pic1, pic2 , pic3]

然后根据接口返回的值作为数组下标，用
<img :src="arr[接收接口返回值的变量]" alt="">

<template>
<!--vue3动态引入路由文件-->
<div class="home">
// 假设index 就是接口返回的污染物级别
  <img :src="arr[index]" alt="">
</div>
</template>

这样当然可以，但是大家思考一下代码量：
5类*5级，我们要引入25个对象 + 开五个数组才能实现这个功能。这样无疑是低质量的解决方法。

方法二：使用动态引入图片的方法

废话不多说，直接上代码

<template>
<!--vue3动态引入路由文件-->
<div class="home" v-for="(item,index) in a" :key="index">
  <img :src="getImageUrl(index)" alt="">
</div>
</template>

<script lang="ts" setup>
    const catatory = [1,3,2,4,5];    // 这代表接口返回每一类污染物的危险级别
    const a = [0,0,0,0,0]; // 主要是用它的index , index+1 表示每一种类
    // 我们将图片命名为： pic1-1.jpg  pic1-2 .......
    const getImageUrl = (index) => {
          // index +1 代表危险级别、 a[index] 代表这一类的危险级别（这样做的前提是数组中的危险级别和污染物种类是一一对应的）
          return new URL(`../assets/images/pic${index+1}-${catatory[index]}.jpg`,import.meta.url).href;
    }
</script>
<style lang="scss" scoped></style>

这样我们就得到了 pic1-3.jpg、 pic2-1.jpg、 pic3-2.jpg、 pic4-4.jpg、 pic5-5.jpg 五张背景图片。