Q:

How can i draw an image from the text value i get from firestore database in react?

Normal i am drawing images like this in my react code:
import Gold from "../img/goldnew.png";
img_gold = new Image();
img_gold.src = Gold;
img_gold.onload = function() {
     ctx_buildings.drawImage(img_gold, 90, 0, 90, 120);
};

But now i will draw different images in react and choose what to draw according to a text value i get from firestore database like
ctx.drawImage(material, x*90, y*120, 90, 120);

i get "material" value from firestore and it has text value "img_gold" in it. however when i try to run react it gives me 

Unhandled Rejection (TypeError): Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

What can i do to fix this?

A:

In your first snippet, the variable img_gold is an instance of Image. In your second, the variable material is the string "img_gold", which is very different from the variable img_gold. It's the difference between
ctx_buildings.drawImage(img_gold, 90, 0, 90, 120);

and
ctx_buildings.drawImage("img_gold", 90, 0, 90, 120);

Try the second and see the same error.
What you need to do is set a variable equal to an Image instance depending on the value you get back from Firestore.
import Gold from "../img/goldnew.png";
import Silver from "../img/silvernew.png";

...

function getImage(material) {
  img = new Image();
  if (material === 'img_gold') {
    img.src = Gold;
  } else if (material === 'img_silver') {
    img.src = Silver;
  } else {
    // throw error or use default value
  }
}

Probably a better solution still would be to construct the src value from the string and set it without the import, but I'd need to see where ctx is getting defined and used to say more.

