Images example?

[Shyam-Chen]

<img src="./assets/images/foo.svg" alt="Foo">

[jamuhl]

you mean if alt attribute gets translated? not the case right now...but we could add that.

[Shyam-Chen]

or ...

<!-- without framework-->
<img src="./assets/images/{{ file }}" alt="{{ alt }}">

[jamuhl]

what you mean by without framework? could you explain a little more what you want to achieve?

[Shyam-Chen]

what you mean by without framework?

Just only vanilla JS. No Angular, React, and Vue.

could you explain a little more what you want to achieve?

I want to change different picture in different languages.

[jamuhl]

you got access to the underlaying i18next instance via:

i18nextify.i18next from there you could get the current local or locals (ordered by prio) http://i18next.com/docs/api/#language

you can take that to replace those values, pseudo code:

const lng = i18nextify.i18next.language;
const ele = document.getElementById('imgID');
ele.src = ele.src.replace('{file}', `filename_${lng}`);
ele.setAttribute('alt', i18nextify.i18next.t('An awesome cat image'));

Will think about a way to solve this inside the framework. Alt attribute is no big deal...

For the file i might make something like:

<img src="./assets/images/{{foo.svg}}" alt="Foo">

foo.svg will then be a key in the translation files and could be replaced to whatever you want for a specific language.

[jamuhl]

coming back i18nextify@1.1.0 includes fragment replacement: https://github.com/i18next/i18nextify#fragment-replacement-for-links-and-images

and alt tags are now added to the translatable attributes.