uni-app 严重BUG nvue图片无法显示

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

uni-app 严重BUG nvue图片无法显示

测试过的手机

huawei mate20 pro

操作步骤

  • nvue中不显示

预期结果

  • nvue像vue一样正常显示

实际结果

  • 不显示

bug描述

nvue中https图片不显示 vue是可以的 之前有人已经提过 官方确认了bug 但是还没改 https://ask.dcloud.net.cn/question/167392


| 信息类别       | 信息内容   |
|----------------|------------|
| 产品分类       | uniapp/App |
| PC开发环境操作系统 | Mac        |
| PC开发环境操作系统版本号 | 14.4       |
| HBuilderX类型 | Alpha      |
| HBuilderX版本号 | 4.27       |
| 手机系统       | 全部       |
| 手机厂商       | 华为       |
| 页面类型       | nvue       |
| vue版本       | vue3       |
| 打包方式       | 云端       |
| 项目创建方式   | HBuilderX  |

Harmonyos Next教程
5 回复

刚用这代码测试了下，没发现问题，你看下附件，是nvue界面的 <template>
<view class="content">
<image style="width: 300px; height: 300px;" src="https://pics7.baidu.com/feed/b999a9014c086e064fac90968464d6fa0bd1cb66.jpeg@f_auto?token=ddb83b0393389d05f69bbea10d135c61" mode="aspectFit" ></image>
111111111111
</view>
</template>

<script> let that; export default { data() { return { }; }, onLoad() { }, methods: {} } </script> <style lang="less"> </style>



你的https那个证书是正常的

https如果证书不正常 就不行 可能nvue校验了证书

你的这个 我也能加载出来

在uni-app中遇到nvue页面图片无法显示的问题，确实可能会影响应用的用户体验。这里我将提供一些可能的代码示例和解决方案，帮助你定位和解决这一问题。由于无法直接确定具体的原因，我将覆盖几种常见的情况。

1. 检查图片路径

确保图片路径正确无误。如果是本地图片，请确认图片文件已正确放置在项目中，并且路径引用正确。

<!-- 本地图片 -->
<image src="~/static/images/logo.png"></image>

<!-- 网络图片 -->
<image src="https://example.com/logo.png"></image>

2. 使用正确的组件

在nvue中，应使用<image>组件而不是HTML的<img>标签。

<!-- 正确 -->
<image src="path/to/image.png"></image>

<!-- 错误 -->
<img src="path/to/image.png" />

3. 检查样式设置

图片可能因为样式设置（如宽度、高度为0，或者display属性设置不当）而无法显示。

<style>
.visible-image {
    width: 100px;
    height: 100px;
}
</style>

<image class="visible-image" src="path/to/image.png"></image>

4. 网络图片加载问题

如果是网络图片，可能是因为CORS（跨源资源共享）策略或图片URL已失效。

// 检查网络图片是否可访问
uni.request({
    url: 'https://example.com/logo.png',
    responseType: 'arraybuffer',
    success: function(res) {
        console.log('图片可访问');
    },
    fail: function(err) {
        console.error('图片访问失败', err);
    }
});

5. 图片资源未正确打包

确保在构建配置中图片资源被正确包含。如果是条件编译，请检查相关配置。

// 在manifest.json或vue.config.js中配置资源路径
{
    "mp-weixin": { // 或其他平台配置
        "usingComponents": true,
        "staticResources": {
            "static": {
                "root": "static/",
                "input": "**/*.png"
            }
        }
    }
}

6. 使用Base64编码

作为临时解决方案，可以尝试将图片转换为Base64编码直接嵌入。

<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."></image>

请注意，上述代码示例仅作为参考，并不能保证解决所有nvue图片无法显示的问题。具体解决步骤还需结合实际情况进行调整。如果问题依旧存在，建议查阅uni-app官方文档或社区论坛，寻找是否有其他开发者遇到并解决了类似的问题。

回到顶部