Dynamic URL for pictures in SRC folder - reactjs

Question

I have some storage with pictures in src folder:
const pictures: Array<CarouselPicture> = [
{
index: '1',
url: '../../data/carousel/carousel1.png',
description: ''
}
export default pictures;
Urls are corect for this file, I can reach all my pictures without any problems. Also I have a component where this storage is used:
import pictures from './CarouselData'
export default class ImageContainer extends Component {
render() {
return (
<div className='carousel_image-container'>
{pictures.map((pic) => {
return (
<div key={pic.index}>
<img src={pic.url}></img>
</div>
)})}
</div>
)
}
}
For this component URL's are not correct and I can't reach my pictrures. How can I resolve this problem? I want to write URL's once in my storage and then use the storage in several different components in different folders in my project without changing URL's of my pictures. In other words I want to get pathes dynamically.
I understand that {pic.url} isn't correct, but I dont know how to programm this correctly.
PS: Accordingly some questions here, it would be better to store pictures in src folder, not in public, so I guess 'process.env.PUBLIC_URL' isn't solution (but who knows).

Answer 1

Due to webpack configurations url: '../../data/carousel/carousel1.png', or inline <img src="../../data/carousel/carousel1.png"/> often work for external links such as url: 'https://external/image/link.png'
In your case, you should try require('../../data/carousel/carousel1.png') or import carousel1 from '../../data/carousel/carousel1.png'

Answer 2

Your hunch with using process.env.PUBLIC_URL is correct when using the public/ folder. Assuming your images are in public/data/:
const pictures: Array<CarouselPicture> = [
{
index: '1',
url: `${process.env.PUBLIC_URL}/data/carousel/carousel1.png`,
description: ''
}
]
And as you said you can also do it differently and move your image to your src/ folder. Either one is fine.
These can be located anywhere in src/ and you import them using the normal import rules:
import carousel1 from './images/carousel1.png'
import carousel2 from './images/carousel2.png'
const pictures: Array<CarouselPicture> = [
{
index: '1',
url: carousel1,
description: ''
},
{
index: '1',
url: carousel2,
description: ''
}
]

Answer 3

Make a file which will export images as variable
like this.
for example-
imageExporter.js
export const imageA = {id:1, url:"./your correct relative path for image", description: 'some description'};
and in your component import these image as variable and use them as image source
import {imageA} from './ imageExporter.js path here'
and then
<img src={imageA.url} />