For WebApp

Firstly, we need to config API gateway, such that public access is allowed.

app.use('/locales', express.static(__dirname + '/app/l10n/translations'))

Secondly, we need the image mapping file located in ./app/l10n/translations/:locale/images.json by some generators

// ./app/l10n/translations/en-HK/images.json
{
    top_logo_props: {
        srcset: "/images/[email protected] 3x, /images/[email protected] 2x, /images/[email protected] 1x",
        src: "/images/[email protected]"
    },
    edit_button: '/images/edit_button_en-HK.png',
    download_button: '/images/download_button.png',
    flags: {
        cn: 'cn.png'
    }
}

// ./app/l10n/translations/zh-HK/images.json
{
    top_logo_props: {
        srcset: "/images/[email protected] 3x, /images/[email protected] 2x, /images/[email protected] 1x",
        src: "/images/[email protected]"
    },
    edit_button: '/images/edit_button_zh-HK.png',
    download_button: '/images/download_button.png',
    flags: {
        cn: 'cn.png'
    }
}

In addition, according to the project usage, create translation file for individual scene, like account-viewer.json

// ./app/l10n/translations/en-HK/account-viewer.json
{
    account:{
        edit_button: '$t(images:edit_button)'
        edit_text: 'Edit'
    }
}

// ./app/l10n/translations/en-HK/common.json
{
    top_logo_props: '$t(images:top_logo_props)'
}

Finally, i18n agent could be initialized

// ./app/i18n.js
var i18next = require('i18next')

i18next
.init({
  fallbackLng: 'en',
  ns: ['common', 'images'],
  defaultNS: 'common',
  debug: true,
  interpolation: {
    escapeValue: false, // not needed for react!!
  },
  returnObjects: true, // we need this for img.srcset case
});

From the time onwards, we can use as below

// ./app/components/profile.js

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

const Presenter = ({t, user_email, user_profile_pic}) => (
  <div>
    <img {...t('top_logo_props')}/>
    <p>{t('user.name')}</p>
    <p>{user_email}</p>
    <img src={user_profile_pic}/>
    <img src={t('account.edit_button')}/>
  </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;