0

Boa tarde, estou usando a biblioteca React-intl para fazer a internacionalização de textos em pt_br e inglês em um projeto de aplicação web React, porém necessito traduzir as imagens também e não faço ideia em como fazer isso. Para a tradução dos textos estou usando FormattedMessage, mais ou menos assim:

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

Tentei usar a mesma lógica para imagens mas não encontrei nada parecido. As imagens em pt_br e en são chamadas em tags <img src={}/> depois na aplicação. Como posso conseguir mudar a imagem dependendo da linguagem que o usuário estiver usando?

3
  • As imagens estão em algum endereço, ou estão locais no projeto? Commented 21/10/2019 às 18:34
  • Você necessita mudar a imagem de acordo com a linguagem? Commented 21/10/2019 às 19:07
  • Elas estão no local do projeto. Tenho a mesma imagem em pt-br e en e necessita mudar elas de acordo com a linguagem que o usuário está vendo o site (no caso, se não tiver especificado o default é pt-br)
    – deadpool
    Commented 21/10/2019 às 19:13

1 Resposta 1

1

Você pode usar a função injectIntl, para receber o valor de intl e verificar qual a linguagem a ser usada para fazer uma condição e assim renderizar a imagem que deseja.

Exemplo

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);
1
  • Fiz assim e funcionou, mt obrigado cara! Bem mais fácil do que imaginava!
    – deadpool
    Commented 22/10/2019 às 12:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .