<template>
<view class="main">
<image :src="src" mode="aspectFill"></image>
</view>
</template>
<script>
export default {
data() {
return {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMjI5LDIyNikiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj7pqaw8L3RleHQ+PC9zdmc+"
}
}
}
</script>
style scoped>
.main image{
width: 100rpx;
height: 50rpx;
}
</style>
艾朗
- 发布：2022-01-12 15:11
- 更新：2022-01-12 16:09
- 阅读：523
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.5
手机系统： iOS
手机系统版本号： iOS 15
手机厂商： 苹果
手机机型： ios11
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
<template>
<view class="main">
<image :src="src" mode="aspectFill"></image>
</view>
</template>
<script>
export default {
data() {
return {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMjI5LDIyNikiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj7pqaw8L3RleHQ+PC9zdmc+"
}
}
}
</script>
style scoped>
.main image{
width: 100rpx;
height: 50rpx;
}
</style>
<template>
<view class="main">
<image :src="src" mode="aspectFill"></image>
</view>
</template>
<script>
export default {
data() {
return {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMjI5LDIyNikiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj7pqaw8L3RleHQ+PC9zdmc+"
}
}
}
</script>
style scoped>
.main image{
width: 100rpx;
height: 50rpx;
}
</style>预期结果：
app中可以正常显示
app中可以正常显示
实际结果：
app中不显示
app中不显示
bug描述：
ios端 Nvue页面 image标签使用base64不显示图片，h5端是正常显示的。
1 个回复
DCloud_UNI_Anne
nvue页面image标签不支持svg格式图片
感谢您的反馈，稍后会在文档附加说明