React Dynamic image componet #React

Double quotes" + dynamic_URL_via_var combo

export const countryData = {
'sl': { name: 'Sri Lanka', flag: '/flag-of-Sri-Lanka.png' },
'uk': { name: 'UK', flag: '/flag-of-United-Kingdom.png' },
'usa': { name: 'USA', flag: '/flag-of-United-States-of-America.png' },
'ca': { name: 'Canada', flag: '/flag-of-Canada.png' },
'It': { name: 'Italy', flag: '/flag-of-Italy.png' },
'aus': { name: 'Australia', flag: '/flag-of-Australia.png' },
'me': { name: 'Middle East', flag: '/flag-of-Middle-East.png' },
'other': { name: 'Other', flag: '/flag-of-World.png' }, };
"part of URL within Double quotes" + dynamic_URL_via_var combo worked for me.

<Avatar src={require('../assets'+countryData['uk']['flag'])} />

dynamic image componet

//Reference
// https://stackoverflow.com/questions/52171142/importing-image-dynamically-react-js-require-img-path-cannot-find-module

Try this solution for dynamic image:-

**Componet**
const photo = props => (
    <div className={classes.Column}>
      <img src={require( `../../components/assets/images/${props.imageSource}`)} alt={props.imageAlt} />
      <div className={classes.Container}>
        <p>{props.brand}</p>
        <p>{props.title}</p>
        <p>{props.price}</p>
     </div>
   </div>
);

**Include Componet**
const productCategory = fetchProducts.map((product, index) => {
    return (
      <Photo
        key={index}
        title={product.title}
        brand={product.brand}
        description={product.description}
        imageSource={product.image}
        imageAlt={product.title}
      />
    );
}); 

jsondata.js

  //json data.
  "ProductSlider":[
              {
                "image":"Product1.jpg"
              },
              {
                "image":"Product2.jpg"
              }]
   //mapping data list in parent component.
    {sliderData.map((data) => (
            <SwiperSlide className='w-10 '>
            <ProductCard data={{imgSrc: data.image}}  />
            </SwiperSlide>
          ))}
        
    //child component(linked image).
        import React from 'react'
        import { CardImg } from 'react-bootstrap'
        
        export default function ProductCard(props) {
          let {imgSrc} = props.data;
        
          return (
            <div className="overflow-hidden">  
              <div className='overflow-hidden bg-grey opacity-card' >
                <CardImg  
                      variant='top'
                      src={require(`../assets/images/${imgSrc}`)}
                     />
              </div>
              <div className='text-center p-1 opacity-card-title' >
                <div>Add to cart</div>
              </div>
            </div>
          )
        }

Photo component

const baseUrl = "../../components/assets/images/";
Then you can pass to your Photo component like that:

<Photo
  key={index} // Don't use index as a key! Find some unique value.
  title={product.title}
  brand={product.brand}
  description={product.description}
  imageSource={baseUrl + product.image}
  imageAlt={pro.title}
/>;
Lastly, in your Photo component use require:

<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
or like that:

<img src={require( "" + props.src )} alt={props.imageAlt} />
But, don't skip "" part or don't use it directly like:

<img width="100" alt="foo" src={require( props.src )} />
since require wants an absolute path string and first two do this trick.