v-html样式 APP不显示,uni-app不支持svg文件显示吗?v-html显示不了svg图
时间: 2023-10-25 13:31:12 浏览: 145
腾讯云部署Django+Nginx+uWSGI+SimpleUI.解决 .svg文件不能显示问题
Uni-app 支持 SVG 文件显示,但是在使用 v-html 渲染 SVG 图片时,需要注意以下几点:
1. 需要给 SVG 元素设置宽度和高度,否则可能无法显示;
2. 需要在组件的 created 生命周期中引入 SVG 文件,例如:
```javascript
created() {
import('@/assets/icon.svg').then((svg) => {
this.svgIcon = svg.default;
});
},
```
3. 在模板中使用 v-html 渲染 SVG 图片时,需要使用 `v-bind` 绑定数据,例如:
```html
<div v-html="svgIcon"></div>
```
注意,由于安全原因,uni-app 默认禁止使用动态的 HTML 和 SVG 内容,需要在 `pages.json` 文件中的 `usingComponents` 字段中开启 `allow-html` 和 `allow-svg`,例如:
```json
{
"usingComponents": {
"rich-text": "/path/to/rich-text",
"web-view": "/path/to/web-view",
"official-account": "/path/to/official-account",
"open-data": "/path/to/open-data",
"navigation-bar": "/path/to/navigation-bar",
"allow-svg": true,
"allow-html": true
}
}
```
希望这些信息对你有所帮助。
阅读全文