接口返回的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设置宽高。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐