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;