ImgResource component

[mircealungu]

We're using the APP_DOMAIN + 'static/...' too much in the code. Two examples are:

<img src={APP_DOMAIN + "/static/icons/" + "info-icon.png"} alt="" />

or

<img
              src={APP_DOMAIN + "/static/images/volume_up.svg"}
              alt={strings.speak}
              width={style.img_width}
              height={style.img_height}
              style={{
                paddingLeft: style.img_paddingLeft,
                paddingRight: style.img_paddingRight,
              }}
            />

We always have to construct the path to the image.

I see two alternatives:

1. Create an Img component that can be used something like <Img source="images/info-icon" width={... component. It takes a src, concatenates the src path, and passes all the other components to the actual img. (Or, probably create a separate Img and Icon components for simplicity of writing and reading code?)
2. Create a helper function static_path that does the concatenation.

I think the first is a bit more elegant.

[tfnribeiro]

What would be the benefit of using a Img component vs a HTML <img> element?

I think to resolve the issue of the import the getStaticPath(folder, file) would make all the calls just src={_getStaticPath("images", "volume_up.svg")} - would that be better?

[mircealungu]

The concatenation of the path is done in the component itself, so only once, as opposed to doing it in every <img>. Do you see what I mean? If not, maybe I should just do it myself and show instead of tell :)))

[tfnribeiro]

I think I understand, but I am more thinking that we also will have images that are not in the public folder, so it's a very specific wrapper. So maybe calling it a more specific name like StaticImg or something similar would make more sense. However, we would still have to specify different folders so it's just the first path that we be saving from altering every time and at that point I don't see the different between a method or a component.