img图片的src分别在vue2、vue3项目中如何动态赋值?

2023-12-23 08:32:34

vue2引用示例:

  1. 方式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){}
	},
});
  1. 方式2:提前在定义变量时引入
import redCar from "@/assets/icon/redCar.png"
import greenCar from "@/assets/icon/greenCar.png"

vue3引用示例:

vue3中图标引入方法区别于vue2,是一种全新的方式

  1. 场景1:百度地图中引入
const redCar = new URL('../../../assets/icon/redCar.png', import.meta.url).href //引用图标
let icon = new BMapGL.Icon(redCar, new BMapGL.Size(10, 10))
  1. 场景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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。