React JS- Internationalization of images

Question

Good afternoon, I’m using the library React-Intl to internationalize texts in pt_br and English in a React web application project, but I need to translate the images as well and I have no idea how to do this. For the translation of the texts I am using Formattedmessage, sort of like this:

<p><FormattedMessage id={"text"} defaultMessage={"Texto original"}/></p>

I tried to use the same logic for images but found nothing similar. pt_br and en images are called in tags <img src={}/> later in the application. How can I change the image depending on the language the user is using?

Answer 1

You can use the function injectIntl, to receive the value of intl and check which language to use to make a condition and render the image you want.

Example

import {injectIntl, intlShape} from 'react-intl';

const MeuComponente = ({intl}) => {
   return (
     <React.Fragment>
      { 
       intl.locale === "pt_br" ?
          <img src={require('../imagemPortugues.png')} />
        :
          <img src={require('../imagemIngles.png')} />
       }
     </React.Fragment>
    )

}
export default injectIntl(MeuComponente);