Binding URL on go.Picture & handle error usecase

GoJS
1

I am trying to handle error usecase with go.Picture element, go.Picture element is binded with dynamic URL to load like for example :

                        $(go.Picture, {
                              width: 55,
                              height: 55
                          },
                          new go.Binding("source", "img")
                        )

Incase the URL is corrupted or storage remove the images then url will not load image & hence blank image is displayed. I just want to show default image in that case.

I tried looking into successFunction but i dont think on error this will help out.
Any clue will be greatly appreciated.

2

Try setting Picture | GoJS API

3

Thanks for the reply.

I tried the errorFunction like below, but its not been invoked when url is hitted & error is 404 on that image url on console

                          $(go.Picture, {
                              width: 55,
                              height: 55
                          },
                          {
                            errorFunction: function(picture,eve) {
                              console.log("Inside error loading image");
                                picture.source = errorImage;
                            }
                          },
                          new go.Binding("source", "img")
                        )
4

I just tried it, and I find that the Picture.errorFunction does indeed get called. I have a similar Picture:

    $(go.Picture, "nonexistent.jpg",
      {
        width: 50, height: 50,
        errorFunction: function(pic, e) {
          pic.diagram.commit(function() {
            pic.source = "../samples/images/hs1.jpg";
          }, null);  // null means temporarily set skipsUndoManager to true
        }
      })

The console & network activity shows getting a 404 error, and the errorFunction is called, substituting the image source successfully.

I also tried it so that the substitute image source would result in 404 errors, and that worked correctly too, causing the Picture not to show anything at all.

5

My picture is bound to an anonymous function binding to various things. How do I add the error function in here to make it work?
$(go.Picture,

                new go.Binding("source", "", item => {              
                        return JSUtils.imageUrl(item.itemCode, item.orientation, false);
                }),
                new go.Binding('width', '', item => item.width * JSUtils.sizeMultiplier),
                new go.Binding('height', '', item => item.height * JSUtils.sizeMultiplier)
            ),

I just want no picture and no 404 error if an image is missing.

6

If the image doesn’t load, it won’t show anything. There’s no way to avoid the 404 error if the URL fails to find an image resource, but by default that’s not shown in the diagram.

That error function is a property of the Picture class: