React JS-image internationalization

Question

React JS-image internationalization

Good afternoon, I am using the React-intl library to do the internationalization of 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 , more or less like this:

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

I tried using the same logic for images but couldn't find anything like it. Images in pt_br and en are called in tags <img src={}/> then in the application. How can I change the image depending on the language the user is using?

0

react internacionalização

Author: deadpool, 2019-10-21

Source

1 answers

score 0 · Accepted Answer

You can use the function injectIntl, to receive the value of intl and check which language to use to make a condition and thus 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);