vue3 用＜img＞标签加载svg图片

最新推荐文章于 2024-08-16 09:59:52 发布

零点七九

最新推荐文章于 2024-08-16 09:59:52 发布

阅读量1.5k

点赞数 1

文章标签： java 前端开发语言

本文链接：https://blog.csdn.net/qq_34736893/article/details/133752640

版权

文章讲述了如何将接口返回的SVG格式图片转换为Base64格式，以便在前端展示。首先，使用img标签设置宽度和高度，然后利用JavaScript编码函数将SVG字符串转换为Base64，最后通过axios请求获取SVG数据并进行转换。

摘要由CSDN通过智能技术生成

接口返回的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);
      }
    });
  };