uni-app APP不能渲染SVG图片

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app APP不能渲染SVG图片
![SVG示例](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW1CI height=“1rem” width=“1rem” viewBox=“0 0 48 48”><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="M10 44a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2z"></path><path stroke-linecap="round" d="M21 22V4h12v18l-6-6.273z" clipRule="evenodd"></path><path stroke-linecap="round" d="M10 4h28"></path></g></svg>)

svg图片只能在web端显示， 到移动端就不渲染了

移动端至今无法支持SVG渲染吗？


Harmonyos Next教程
2 回复

官方不支持 但是有插件是可以在app端渲染svg的 svg插件:https://ext.dcloud.net.cn/search?q=svg


在处理uni-app中SVG图片无法渲染的问题时，首先需要确认几个关键点：SVG文件是否被正确引入、是否在组件中正确引用以及是否使用了支持SVG的渲染方式。以下是一些可能的解决方案和代码示例：

1. 直接在模板中引入SVG

如果SVG文件较小，你可以直接将SVG代码嵌入到Vue组件的模板中。

<template>
  <view>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </view>
</template>

2. 使用<image>标签引入外部SVG

如果SVG文件作为外部资源存在，你可以尝试使用<image>标签引入。不过，这种方式有时可能不被所有平台支持，特别是如果SVG包含复杂的交互或样式。

<template>
  <view>
    <image src="/static/my-icon.svg" mode="widthFix" style="width: 100px;"></image>
  </view>
</template>

3. 使用<object>或<iframe>（不推荐）

这种方法在Web应用中较为常见，但在uni-app的移动端应用中可能不适用或效果不理想。

<!-- Not recommended for uni-app mobile apps -->
<template>
  <view>
    <object type="image/svg+xml" data="/static/my-icon.svg" width="100" height="100"></object>
  </view>
</template>

4. 使用第三方库转换SVG为Base64

你可以将SVG文件转换为Base64编码，然后作为图片资源引入。这种方法可以确保SVG内容被正确渲染，但可能增加文件大小。

// 示例：在Vue组件的created钩子中转换SVG为Base64
created() {
  fetch('/static/my-icon.svg')
    .then(response => response.text())
    .then(svgString => {
      const base64String = btoa(unescape(encodeURIComponent(svgString)));
      this.svgBase64 = `data:image/svg+xml;base64,${base64String}`;
    });
}

然后在模板中使用：

<template>
  <view>
    <image :src="svgBase64" mode="widthFix" style="width: 100px;"></image>
  </view>
</template>

总结

uni-app在处理SVG时，由于跨平台特性，可能需要在不同平台上进行适配。建议首先尝试直接将SVG嵌入代码中或使用<image>标签引入外部SVG文件。如果这些方法不能满足需求，考虑将SVG转换为Base64编码。务必在不同平台上测试，以确保SVG能够正确渲染。

回到顶部