img图片的src分别在vue2、vue3项目中如何动态赋值?
浅谈img图片src在vue2、vue3项目中动态赋值问题
·
vue2引用示例:
- 方式1:直接在调用时引入
let img = new Image();
img.src = require('@/assets/icon/car.png');
this.iconLayer = new mapvgl.IconLayer({
width: 25,
height: 25,
icon:img,
enablePicked: true, // 是否可以拾取
selectedIndex: -1, // 选中项
selectedColor: 'rgb(230,104,38)', // 选中项颜色
autoSelect: true, // 根据鼠标位置来自动设置选中项
onClick: (e) => { // 点击事件
if(e.dataIndex!=-1){}
},
});
- 方式2:提前在定义变量时引入
import redCar from "@/assets/icon/redCar.png"
import greenCar from "@/assets/icon/greenCar.png"
vue3引用示例:
vue3中图标引入方法区别于vue2,是一种全新的方式
- 场景1:百度地图中引入
const redCar = new URL('../../../assets/icon/redCar.png', import.meta.url).href //引用图标
let icon = new BMapGL.Icon(redCar, new BMapGL.Size(10, 10))
- 场景2:普通img标签中引入
<li v-for="(item, index) in list" :key="index"><img :src="exportImgSrc(item.icons)" /></li>
const exportImgSrc = (src: string): string => {
if (src) {
return new URL(`../assets/icon/${src}`, import.meta.url).href;
} else {
return new URL(`../assets/icon/default.png`, import.meta.url).href;
}
};
更多推荐
已为社区贡献2条内容
所有评论(0)