Adding image adds multiple images one below another. about fabricjs-react

[asotog]

@azakero yea I think documentation, is not properly describing you have to wrap the add image part inside useEffect:

useEffect(() => {
  fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function (oImg) {
    editor?.canvas.add(oImg);
  });
}, [fabric, editor])

[asotog]

yea sure editor?.canvas is the original library so it is basically http://fabricjs.com/docs/fabric.Canvas.html

[azakero]

Thanks a lot mate. For this package and for your help.

[azakero]

@asotog Oh man. I feel stupid now. Thanks a lot. However I had another question. Can I use all the features from the original FabricJS library in this one?

[azakero]

yea I think documentation, is not properly describing you have to wrap the add image part inside useEffect:

useEffect(() => {
  fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function (oImg) {
    editor?.canvas.add(oImg);
  });
}, [fabric, editor])

@asotog Hey man, I just tried this but it is still the same. Would you please try it again and check?

[azakero]

@asotog Sorry to bother you again mate, but have you checked it yet?

[asotog]

Hey @azakero not yet will give a look later this week, I think you can add a flag for now with useState to know whether or not image is loaded

[azakero]

Okay. Thank you.

[acabhishek942]

I am facing a similar issue @azakero were you able to resolve this ??

[Fit-Developer]

try this

useEffect(() => {
fabric.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function (oImg) {
editor?.canvas.add(oImg);
});
}, [editor?.canvas])