s***@qq.com
s***@qq.com
  • 发布:2019-07-04 14:21
  • 更新:2019-12-04 09:49
  • 阅读:2358

【报Bug】自定义组件模式下,image组件在h5或微信小程序中不显示图片

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
自定义组件中的image组件,在h5和微信小程序中总有一端不显示图片。

重现步骤

[步骤]

  1. 使用vue-cli创建项目,usingComponents配置为true
  2. 自定义组件 src/components/logo.vue 中引用图片 src/static/logo.png,使用方式:<image src="../static/logo.png"></image>
  3. 在 src/pages/index/index.vue 页面中引用自定义组件 logo.vue

[结果]
图片在h5端不显示,在微信小程序中显示。
改为<img src="../static/logo.png" />可以正常显示

[期望]
图片在h5和微信小程序中都显示。

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

Chrome手机模式和微信小程序开发工具

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

cli创建的,已使用最新版。

[编译模式是老模板模式还是新的自定义组件模式?]

使用的是自定义组件模式

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

测试代码地址 https://gitee.com/hezySign/uni-app-test

  • src/components/logo.vue
<template>  
    <view class="testImage">  
        <div>作为子组件被引用时,h5和微信小程序中的体验不一致,以下两种图片地址使用方式总是一个显示另一个不显示</div>  
        <text>../../logo.png </text>  
        <image src="../../static/logo.png"></image>  
        <text>../logo.png</text>  
        <image src="../static/logo.png"></image>  
    </view>  
</template>  

<script>  
    export default {  
        name: "logo"  
    }  
</script>  

<style scoped>  
    .testImage {  
        display: flex;  
        flex-direction: column;  
        align-items: flex-start;  
    }  
    .testImage > image {  
        width: 50upx;  
        height: 50upx;  
        border: 1upx solid red;  
    }  
</style>
  • src/pages/index/index.vue
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view>  
            <text class="title">{{title}}</text>  
        </view>  
        <logo></logo>  
    </view>  
</template>  

<script>  
    import logo from '../../components/logo.vue';  
    export default {  
        components: {  
            logo  
        },  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
    }  
</script>  

<style>  
    .content {  
        text-align: center;  
        height: 400upx;  
    }  

    .logo {  
        height: 200upx;  
        width: 200upx;  
        margin-top: 200upx;  
    }  

    .title {  
        font-size: 36upx;  
        color: #8f8f94;  
    }  
</style>

联系方式

[QQ] 812420569

2019-07-04 14:21 负责人:无 分享
已邀请:
深海智行

深海智行 - 专注前端培训

这应该是微信的相对路径在自定义组件内计算方式不同导致的,建议你使用绝对路径。

NightsWatcher

NightsWatcher

我也遇到了这样的问题,相对路径绝对路径都不好使:

川儿

川儿

使用绝对路径类似于这样 <image src="/static/images/wlgz/img2.png" height="85" width="86"></image> 真垃圾 图片不能粘贴复制

  • NightsWatcher

    我的“/images/cluster.png”就是绝对路径

    2019-11-22 11:33

  • 深海智行

    回复 NightsWatcher: 你怎么没有/static,静态资源默认只拷贝/static,其他目录需要自己配置一下的

    2019-11-26 14:43

  • 川儿

    回复 NightsWatcher: https://img-cdn-qiniu.dcloud.net.cn/uploads/answer/20191127/adc50454a6a56a266279309000e30608.jpg

    2019-11-27 09:57

  • NightsWatcher

    回复 深海智行: 你好,我写的是mui框架+H5项目最后打包成ios端运行的ipa文件,我以前没有用/static做项目也没有出现这样的问题

    2019-11-27 15:56

  • NightsWatcher

    回复 川儿: 对兄弟,直接写在标签里是没有问题的,我是根据高德的文档写在js中就不正常了,你可以参照这个地址试试https://lbs.amap.com/api/javascript-api/guide/overlays/massmarker 中 点聚合 MarkerClusterer例子试试

    2019-11-27 16:03

NightsWatcher

NightsWatcher

已解决,我的问题是图片设计的太大,儿我给图片设置的显示尺寸太小,而图片是.png格式的,导致刚好显示了图片的左上角透明区域,所以看起开像是没有显示图片

该问题目前已经被锁定, 无法添加新回复