如何设置iron-image src以使用数据绑定

Question

我有一个带有占位符的铁图像，我希望在按下按钮时显示图像。但是当我更新myImages道具时，图像src不会更新。奇怪的是占位符prop loadingImg工作，我可以更新它和占位符更改。

例如，HTML：

<iron-image   preload fade 
              src$="{{myImages.test1}}"
              placeholder$="[[loadingImg]]"></iron-image>

和元素道具：

myImages: {
          type: Object,
          value: {}, 
        },
loadingImg: {
          type: String,
          value: "../../img/loading.jpg"
        }

然后按钮就会设置

myImages."test1 = "http://example.com/img1.jpg"}

最初，src应指向未定义，因为myImages为空，因此myImages.test1应该是未定义的。但是一旦我给myImages.test1一个url，img src应该更新。这里出了什么问题？

Answer 1

默认情况下，对象属性的更改不可观察。为了使这项工作，你需要使用this.notifyPath（）

这就是prop的loadImg，它只是一个字符串导致页面在更改时更新，但子属性myImages.test1却没有。

修正了示例代码：

updateImage: function(imgSrc) {
this.myImages.test1 = imgSrc;
this.notifyPath('myImages.test1');
}