在项目中提出了一个需求就是根据后端接口返回的typename的名称用ui给的指定的图片与之匹配
我在最开始的思路想着利用img标签的src使用动态样式来绑定对应的图片地址。
因为我首先是把ui给的图片放到了assets静态资源目录，在这个资源目录在webpack会认为该目录下是模块所有动态通过src引入不会把图片转换成base64格式显示不出来图片
这是不用bind绑定src引入的图片会转换成base64
通过require引入是：
<img :src = require('图片路径') alt:""></img>
后面又想到了import来先引入模块再进行名称和图片的判断
//图片引入
import anDan from "@/assets/image/氨氮.png";
import daQiShiDu from "@/assets/image/大气湿度.png";
import daQiWenDu from "@/assets/image/大气温度.png";
import daQiYa from "@/assets/image/大气压.png";
import diBiaoLiuLiang from "@/assets/image/地表流量.png";
import diXiaShuiWei from "@/assets/image/地下水位.png";
import dianDaoLv from "@/assets/image/电导率.png";
import fengSu from "@/assets/image/风速.png";
import fengXiang from "@/assets/image/风向.png";
import gaomengsuanjia from "@/assets/image/高锰酸盐.png";
import huangSeWuZhi from "@/assets/image/黄色物质.png";
import liuLiang from "@/assets/image/流量.png";
import liuSu from "@/assets/image/流速.png";
import minDu from "@/assets/image/密度.png";
import niShaHanLiang from "@/assets/image/泥沙含量.png";
import rongJieYang from "@/assets/image/溶解氧.png";
import shuiShen from "@/assets/image/水深.png";
import shuiWei from "@/assets/image/水位.png";
import shuiWen from "@/assets/image/水温.png";
import shuiPH from "@/assets/image/水PH.png";
import touGuangxing from "@/assets/image/透光性.png";
import tuRangShiDu from "@/assets/image/土壤湿度.png";
import tuRangWenDu from "@/assets/image/土壤温度.png";
import yuLiang from "@/assets/image/雨量.png";
import zongDan from "@/assets/image/总氮.png";
import zongLin from "@/assets/image/总磷.png";
import zaoLei from "@/assets/image/总叶绿素a、蓝藻、绿藻、硅甲藻、隐藻.png";
//调用函数进行类别的传参实现判断
imgImgUrl(data) {
if (data.includes("氨氮")) {
return anDan;
} else if (data.includes("大气湿度")) {
return daQiShiDu;
} else if (data.includes("大气温度")) {
return daQiWenDu;
} else if (data.includes("大气压")) {
return daQiYa;
} else if (data.includes("地表流量")) {
return diBiaoLiuLiang;
} else if (data.includes("地下水位")) {
return diXiaShuiWei;
} else if (data.includes("电导率")) {
return dianDaoLv;
} else if (data.includes("风速")) {
return fengSu;
} else if (data.includes("风向")) {
return fengXiang;
} else if (data.includes("高锰酸盐")) {
return gaomengsuanjia;
} else if (data.includes("黄色物质")) {
return huangSeWuZhi;
} else if (data.includes("流量")) {
return liuLiang;
} else if (data.includes("流速")) {
return liuSu;
} else if (data.includes("密度")) {
return minDu;
} else if (data.includes("泥沙含量")) {
return niShaHanLiang;
} else if (data.includes("溶解氧")) {
return rongJieYang;
} else if (data.includes("水深")) {
return shuiShen;
} else if (data.includes("水温")) {
return shuiWen;
} else if (data.includes("水位")) {
return shuiWei;
} else if (data.includes("水PH")) {
return shuiPH;
} else if (data.includes("透光性")) {
return touGuangxing;
} else if (data.includes("土壤湿度")) {
return tuRangShiDu;
} else if (data.includes("土壤温度")) {
return tuRangWenDu;
} else if (data.includes("雨量")) {
return yuLiang;
} else if (data.includes("总氮")) {
return zongDan;
} else if (data.includes("总磷")) {
return zongLin;
} else if (
this.list[i].displayName.includes("总叶绿素a") ||
this.list[i].displayName.includes("蓝藻") ||
this.list[i].displayName.includes("绿藻") ||
this.list[i].displayName.includes("硅甲藻") ||
this.list[i].displayName.includes("隐藻")
) {
return zaoLei;
} else {
return "";
}
},
//调用imgImgUrl函数传入名称
<img
:src="imgImgUrl(sensors.displayName)"
alt="图片"
/>
背景图片的引入
html的写法
图片地址的封装 封装到image.js文件中
export default {
item: [{
id: 1,
imgUrl: "/src/assets/dataMonitoring/daQiYa.png",
label: "大气压"
},
{
id: 2,
imgUrl: "/src/assets/dataMonitoring/kongQiWenDu.png",
label: "空气温度"
},
{
id: 3,
imgUrl: "/src/assets/dataMonitoring/kongQiShiDu.png",
label: "空气湿度"
},
{
id: 4,
imgUrl: "/src/assets/dataMonitoring/ZongFuShe.png",
label: "总辐射"
},
{
id: 5,
imgUrl: "/src/assets/dataMonitoring/ShuiWei.png",
label: "水位"
}, {
id: 6,
imgUrl: "/src/assets/dataMonitoring/ShuiWRed.png",
label: "水位-红"
}, {
id: 7,
imgUrl: "/src/assets/dataMonitoring/ShuiWYellow.png",
label: "水位-黄"
}, {
id: 8,
imgUrl: "/src/assets/dataMonitoring/ShuiWBlue.png",
label: "水位-蓝"
}, {
id: 9,
imgUrl: "/src/assets/dataMonitoring/ShuiWOrange.png",
label: "水位-橙"
}, {
id: 10,
imgUrl: "/src/assets/dataMonitoring/LiuSu.png",
label: "流速"
}, {
id: 11,
imgUrl: "/src/assets/dataMonitoring/LiuLiang.png",
label: "流量"
}, {
id: 12,
imgUrl: "/src/assets/dataMonitoring/LiuLRed.png",
label: "流量-红"
}, {
id: 13,
imgUrl: "/src/assets/dataMonitoring/LiuLYellow.png",
label: "流量-黄"
}, {
id: 14,
imgUrl: "/src/assets/dataMonitoring/LiuLBlue.png",
label: "流量-蓝"
}, {
id: 15,
imgUrl: "/src/assets/dataMonitoring/LiuLOrange.png",
label: "流量-橙"
}, {
id: 16,
imgUrl: "/src/assets/dataMonitoring/YuLiang.png",
label: "雨量"
}, {
id: 17,
imgUrl: "/src/assets/dataMonitoring/YuLRed.png",
label: "雨量-红"
}, {
id: 18,
imgUrl: "/src/assets/dataMonitoring/YuLYellow.png",
label: "雨量-黄"
}, {
id: 19,
imgUrl: "/src/assets/dataMonitoring/YuLBlue.png",
label: "雨量-蓝"
}, {
id: 20,
imgUrl: "/src/assets/dataMonitoring/YuLOrange.png",
label: "雨量-橙"
}, {
id: 21,
imgUrl: "/src/assets/dataMonitoring/FengXiang.png",
label: "风向"
}, {
id: 22,
imgUrl: "/src/assets/dataMonitoring/FengSu.png",
label: "风速"
}, {
id: 23,
imgUrl: "/src/assets/dataMonitoring/FengSRed.png",
label: "风速-红"
}, {
id: 24,
imgUrl: "/src/assets/dataMonitoring/FengSYellow.png",
label: "风速-黄"
}, {
id: 25,
imgUrl: "/src/assets/dataMonitoring/FengSBlue.png",
label: "风速-蓝"
}, {
id: 26,
imgUrl: "/src/assets/dataMonitoring/FengSOrange.png",
label: "风速-橙"
}]
}
