For MobApp

Firstly, we need the image mapping file located in ./app/l10n/images/index.js by some generators

export const edit_button = {
    "zh-HK": require('edit_button_zh-HK.png'),
    "en-HK": require('edit_button_en-HK.png')
}

export const download_button = require('download_button.png');

export const Flags = {
    "cn": require('cn.png')
}

From the time onwards, we can use as below

// ./app/components/Profile/Layout.js

import React from 'react';
import { translate } from 'react-i18next';
import { get_user_email, get_user_profile_pic } from '../selectors';
import { edit_button } from '../../l10n/images';
import i18n from '../../i18n';

const Presenter = ({t, user_email, user_profile_pic}) => (
  <div>
    <p>{t('user.name')}</p>
    <p>{user_email}</p>
    <img src={user_profile_pic}/>
    <img src={edit_button[i18n.language]}/>
  </div>
)

const mapStateToProps = (state, props) => {
  user_email: get_user_email(state),
  user_profile_pic: get_user_profile_pic(state)
}

const Connected = connect(mapStateToProps)(Presenter);

const Translated = translate(['account-viewer'])(Connected)

export default Translated;

results matching ""

    No results matching ""