自定义组件
发布于 5 年前 作者 asun 15796 次浏览 来自 问答

自定义组件包含image标签，在page使用setData设置图片路径(网络图片)传给组件没法显示图片。问题版本: ios 6.5.14

若是使用page里的data的常量logo: "https://…jpg"能够成功显示。

10 回复

IOS1.6.5不会。其他未测试。

感谢反馈，我们查一下旧版本的问题。

在线等…

IOS版本6.5.13和6.5.14均不行。

iOS的1.6.3以上有问题吗？

简单测试了一下，没有发现问题。麻烦提供一下出问题的代码？

改了也不行。我也尝试了将imagePath替换成image依旧无效，查看到基本库为1.5.7;此问题目前仅在ios发现。

注意5（页面page.wxml）这段代码：在wxml里面，attribute要写成“image-path”。

你好，如果自定义组件里面使用image加载本地路径的图片，图片是相对于自定义组件路径的（而不是页面路径）。

1.组件image-text-vertical.wxml

<!-- 纵向图文组件-->
<view class="image-text-vertical" bind:tap="selected">
  <image class="icon" src="{{imagePath}}" lazy-load="{{true}}"></image>
  <text class="title">{{title}} </text>
</view>

2.组件image-text-vertical.js

Component({
  properties: {
    title: {
      type: String
    },
    imagePath: {
      type: String
    },
    data: {
      type: Object
    }
  },
  methods: {
    selected: function () {
      this.triggerEvent('selected', this.data)
    }
  }
})

3.组件image-text-vertical.json

{
  "component": true
}

4.组件image-text-vertical.wxss

.icon {
  width: 40px;
  height: 40px;
  display: block;
  margin: 10px auto 5px;
  text-align: center;
}
 
.title {
  height: 30px;
  line-height: 30px;
  display: block;
  text-align: center;
}
 
.image-text-vertical {
  color: #000;
  width: 25%;
  size: 14px;
  float: left;
}

5.页面page.wxml

<view >
        <image-text-vertical wx:for="{{hotBrands}}" wx:for-item="hotBrand" wx:key="hotBrand.id" data="{{hotBrand}}" title="{{hotBrand.name}}" imagePath="{{ hotBrand.logo }}">
        </image-text-vertical>
</view>

6.页面page.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    hotBrands: []
  },
  onShow: function () {
    this.initData();
  },
  initData() {
  var hotBrands = [{id: "1", name: "test1", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "2", name: "test2", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "3", name: "test3", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "4", name: "test4", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "5", name: "test5", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "6", name: "test6", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "7", name: "test7", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"},
  {id: "8", name: "test8", logo: "https://standby.cheshijian.net/zx_cb_web/userfiles/image201708/17/UPpYLVvyatRfM3hraNg7Ay.jpg"}];
      this.setData({
        hotBrands: hotBrands
      });
  }
})

7.页面page.json

{
  "usingComponents": {
    "image-text-vertical": "../components/image-text-vertical/image-text-vertical"
  }
}
回到顶部