img图片的src分别在vue2、vue3项目中如何动态赋值?
2023-12-23 08:32:34
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;
}
};
文章来源:https://blog.csdn.net/qq_41238459/article/details/135123269
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!