vue3 用<img>标签加载svg图片
vue3 用img标签加载svg图片
·
接口返回的svg图片格式如下:
<svg width=\"100\" height=\"100\" \nstyle=\"background-color:rgba(255,255,255,255)\"\nviewBox=\"0 0 100 100\" \nxmlns=\"http://www.w3.org/2000/svg\" \nxmlns:xlink=\"http://www.w3.org/1999/xlink\" >\n<path d=\" M12,12h1v1h-1z M13,12h1v1h-1z M14,12h1v1h-1z M15,12h1v1h-1z M16,12h1v1h-1z
。。。
M79,86h1v1h-1z M80,86h1v1h-1z M84,86h1v1h-1z M85,86h1v1h-1z M86,86h1v1h-1z\" stroke=\"rgba(0,0,0,255)\" /> \n</svg>"
需要对接口返回的数据进行处理,转成base64格式
1.第一步:
<img
style="width: 100px; height: 100px"
:src="assetsCodeFormCode"
/>
2.第二步:
转成base64格式
const assetsCodeFormCode = ref('');
const qrSrc = (qrCode: string) => {
if (qrCode === '') return '';
const b64 = window.btoa(unescape(encodeURIComponent(qrCode)));
return `data:image/svg+xml;base64,${b64}`;
};
//接口请求
const getAssetsCodeAction = (id: number) => {
getLabelPrintExample({ id }).then((res) => {
if (!res.code) {
assetsCodeFormCode.value = qrSrc(res.data.qrCode);
}
});
};
最后,就可以成功展示出svg图片了,记得给img设置宽高。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)