I am passing a prop (which contains a string link) into a component. This props is then used inside the src property of <img /> but this causes a broken image instead. What is the correct way of doing this without using the import...from... method in the beginning of my component. The code below shows other alternatives that i tried which dont work.

This really depends on the paths you're serving images from and your build tool. Where is this file relative to your images and are you using create-react-app or something else?
– Nick McCurdyMay 23 at 16:01

you should use image source path relevant to your index.html file. I mean path should describe the way from your index.html to your image file.
– acbayMay 23 at 16:03

@NickMcCurdy Yes I am using create-react-app. And the link is where the image is relative to the file. I have my index.js on the same level as the 'images' directory. the index.html is in the public directory. below is how it looks like: public (index.html) , src( images, components, index.js)
– kabison33May 23 at 16:17

Actually you can pass image src via props but some where you have to import it. You have to do that because React projects mostly use Webpack to build the code and the images also be built with JS code.