Changing format of attribute of element

[che]

Hi there,

I'm trying to change element attribute format from

````````````````````````````````````````````````````````````````````

var r2 = new joint.shapes.standard.Image();

r2.position(230, 10);

r2.resize(100, 40);

r2.attr('label/text', 'Camera');

r2.attr('image/xlinkHref', 'img/camera.jpg');

````````````````````````````````````````````````````````````````````

to

````````````````````````````````````````````````````````````````````

var r2 = new joint.shapes.standard.Image({

  position: {

    x: 120,

    y: 10

  },

  resize: {

    width: 100,

    height: 40

  },

  attrs: {

    label: {

      text: 'Camera'

    },

    image: {

        xlinkHref: 'img/camera.jpg'

    }

  }

});

````````````````````````````````````````````````````````````````````

but only image not working, does anyone know what is the problem?

Thanks

[James Williams]

Hi,

'size' is the name of the attribute for the 2nd example. It can be the following:

size: {

    width: 100,

    height: 40

  },

Thanks

[che]

Thanks for your reply.

But the question was "image is not working".

I guess below part has something wrong. Image directory is fine, but it does not show up, only text show up

image: {

        xlinkHref: 'img/camera.jpg'

    }

[James Williams]

Hi,

Yes, I suspect not setting the size is why the image is not working.

With your code, you can see the image has a width & height of 1.

'resize' is the name of the method, not the attribute. If you replace 'resize' with the following:

size: {

    width: 100,

    height: 40

  },

You can see the image, now has the width & size you desire.

If I try the following, the image displays correctly.

        var r2 = new joint.shapes.standard.Image({
            position: {
                x: 120,
                y: 10
            },

            size: {
                width: 100,
                height: 40
            },

            attrs: {
                label: {
                text: 'Camera'
                },
                image: {

                    xlinkHref: 'https://via.placeholder.com/40'
                }
            }
        });
        r2.position(50, 100);
        r2.addTo(graph);

I think this should solve the issue from the code you provided. You can try it out locally and see.

Thanks,
James

[che]

HI James,

Thanks for your detailed reply.

The problem perfectly solved by your solution. I had to use 'size' rather than 'resize'.

Again thanks for your answer!