REACTjs, require i coś jest nie tak...

<img src={require('./'+skill+'.png')}/>

Witam,
Popełniłam kod jak powyżej w komponencie React. Najpierw długo próbowałam wczytać ten rysunek po prostu, ostatecznie na StackOverflow znalazłem informację o require. Pełna nadziei napisałam to co powyżej a tu klops

Cannot find module './upperBody.png'

Rzecz w tym, że ten plik w tej lokalizacji(czyli w lokalizacji w której jest plik js wywołujący go - jest. Sprawdziłam na innych możliwych plikach - taki sam efekt. Wniosek byłby taki, że tak naprawdę jest istotne położenie pliku z obrazkiem nie wobec wywołującego .js tylko wobec czegoś innego. Czy to tak - a jeżeli tak, to wględem czego podać ścieżkę - czy chodzi o coś jeszcze innego?

Czego używasz do budowania? Webpacka? Czy czegoś innego? I czy używasz jakiegoś pluginu/loadera, który ci ładuje obrazki w formie png przez require? Jeśli nie, to nie zadziała przez require. A jeśli masz ten loader to i tak nie wiem, czy nie będzie problemów z tym, że argument do require jest tworzony dynamicznie, nieznany podczas builda.

Ale przecież możesz normalnie jak człowiek napisać

<img src={'./' + skill + '.png'} />

Z drugiej strony jeśli masz taki komunikat Cannot find module './upperBody.png' to może jednak z czym innym jest problem.

(czyli w lokalizacji w której jest plik js wywołujący go - jest

a nie powinnaś szukać w lokalizacji, w której jest plik wynikowy bundla? Jakieś public czy coś takiego?

To co podajesz sprawdziłam 100 razy ( w różnych postaciach - notacja jak wyżej i z backstikami itd.). Wyskakiwały różne błędy ale tak czy owak nie szło pobrać. Potem znalazłam ten wątek

https://stackoverflow.com/questions/34582405/react-wont-load-local-images

i starałam się postępować w myśl jego zaleceń Stąd niniejszy post bo teraz to już naprawdę nieogarniam. TZN.: na razie ćwiczę pierwszą odpowiedź