Currently, I am in the process of implementing a language selection feature and I need to incorporate flags. Initially, I attempted to use Unicode emojis for flags, but unfortunately, they did not display properly when retrieved from React variables. As a workaround, I have now obtained PNG images of all the required flags.
My setup includes an array of languages with 'name' and 'value' properties. The 'value' property denotes the locale code, as well as the name of the corresponding image file:
languages: [
{
name: 'Swedish',
value: 'sv_SE'
},
{
name: 'English',
value: 'en_US'
},
...
]
In addition, I have imported the necessary files using these statements:
import sv_SE from './flags/sv_SE.png'
import en_US from './flags/en_US.png'
Within my code, the img tag is structured as follows:
languages.map((lang) => (
<img src={ sv_SE } alt={ lang.value }/>
)
At the moment, only the Swedish flag is displaying. However, I would like the flag image to correspond to each respective element in the array. Do you have any suggestions or alternative solutions that could be beneficial in this scenario? Thank you for your time and assistance!