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"

需要对接口返回的数据进行处理，转成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设置宽高。