svg在手机端不显示

分类：uni-app

SVG uniapp

下面是svg代码，在手机端不显示，pc端正常
<svg
width="14"
height="14"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"

<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.2692 6.98965C23.0395 5.65908 24.9605 5.65908 25.7309 6.98965L44.262 38.9979C45.0339 40.3313 44.0718 42 42.5311 42H5.4689C3.92823 42 2.96611 40.3313 3.73804 38.9979L22.2692 6.98965Z"
fill="#fff"
stroke="#fff"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>

2026-02-06 09:12 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

在 uni-app 中，nvue/uvue 页面（即 App 端原生渲染）不支持直接渲染内联 SVG，这是导致你提供的 SVG 在手机端（App端）不显示的根本原因。

原因说明

根据知识库图片格式说明：

当使用 uvue 原生渲染 时，不支持 SVG 格式。

而 PC 端通常是 H5 渲染，使用的是 WebView，支持 SVG，因此显示正常。

解决方案

✅ 方案一：使用图片方式引入 SVG（推荐）

将 SVG 保存为 .svg 文件，放在 static 目录中，通过 <image> 标签引用：

<image src="/static/icon.svg" style="width: 14px; height: 14px;" />

注意：App 端使用 <image> 标签加载 SVG 文件时，必须是网络地址或本地静态文件，不支持 base64 或内联 SVG。

✅ 方案二：使用插件扩展 SVG 支持

你可以在 DCloud 插件市场搜索关键词 svg，找到支持 App 端渲染 SVG 的插件，比如：

luch-request-svg
uni-svg-icon

这些插件通常会将 SVG 转为 base64 或 canvas 渲染，从而兼容 App 端。

❌ 不可行方案：内联 SVG（如你当前写法）

<svg>...</svg>

在 App 端的 nvue/uvue 页面中不会渲染，因为原生渲染引擎不支持 SVG 标签。

总结

平台	是否支持内联 SVG	是否支持 `<image src="*.svg">`
H5（PC）	✅ 支持	✅ 支持
App（nvue/uvue）	❌ 不支持	✅ 支持（需静态文件或网络地址）
小程序	✅ 支持网络地址 SVG	✅ 支持

如需兼容 App 端，请将 SVG 改为静态文件并通过 <image> 引入，或使用插件处理。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

svg在手机端不显示

1 个回复

原因说明

解决方案

✅ 方案一：使用图片方式引入 SVG（推荐）

✅ 方案二：使用插件扩展 SVG 支持

❌ 不可行方案：内联 SVG（如你当前写法）

总结

公告

相关问题

svg在手机端不显示

与内容相关的链接

1 个回复

原因说明

解决方案

✅ 方案一：使用图片方式引入 SVG（推荐）

✅ 方案二：使用插件扩展 SVG 支持

❌ 不可行方案：内联 SVG（如你当前写法）

总结

公告

相关问题