加载图片需要 token

1

<el-image :src="imgSrc" :lazy="imgSrc ? true : false" />

2

const imgSrc = ref("");
const handleImage = async (url: string) => {
    const res = await getImage(url);
    imgSrc.value = res;
};

handleImage("img-src");

3

export const getImage = async (url: string) => {
    const res = await axios({
        url,
        method: "get",
        responseType: "blob"
    });

    return URL.createObjectURL(res);
};

1

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用Mapbox加载图片可以通过以下步骤实现: 1. 在main.js文件中导入mapbox-gl库,并将其设置为Vue的原型属性: ```javascript import mapBoxGl from 'mapbox-gl' Vue.prototype.$mapboxgl = mapBoxGl ``` 2. 在Vue组件的template中添加一个包含id为'map'的div元素,用于显示地图: ```html <template> <div id='map' style='width:400px;height:400px'></div> </template> ``` 3. 在Vue组件的script中,使用mounted钩子函数初始化地图: ```javascript <script> export default { mounted() { this.initmap() }, methods: { initmap() { this.$mapboxgl.accessToken = '你的Token' var map = new this.$mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: [104.07, 30.67], zoom: 5, }); } } } </script> ``` 通过上述步骤,你可以成功加载Mapbox地图并展示在Vue组件中。如果你想在地图中添加图片,可以使用Mapbox的API来实现。例如,你可以使用`map.loadImage`方法加载图片,并在回调函数中将图片添加到地图中。 希望这个回答对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【Vue+Mapbox】Vue中mapbox地图的使用(一)](https://blog.csdn.net/yuelizhe4774/article/details/125975864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue 面试题( 前端开发 + Vue + 面试题 + 准备)](https://download.csdn.net/download/weixin_41784475/88219148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值