Is it possible to load a module dynamically from a string

Question

Currently I am using the following code to import some module dynamically using web-packe.

I would like to know if there is a way to avoid the switch. Thanks

import React from 'react'
import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

const loadIcon = (src) => {
  switch (src) {
    case 'iconSend':
      return iconSend
    case 'iconReload':
      return iconReload
    case 'iconDownload':
      return iconDownload
    case 'iconAddDoc':
      return iconAddDoc
    case 'iconAddAgendaItem':
      return iconAddAgendaItem
  }
}

const Option = ({id, name, isActive, src}) => {
  return (
    <div>
      <div>
        <img src={loadIcon(src)} alt={name} />
      </div>
    </div>
  )
}

export default Option

Instead of import you can use **require** example: `const iconSend = require('./icon-send.png'); ` — RamaKrishna, Sep 20 '17 at 07:42

score 1 · Answer 1 · answered Sep 20 '17 at 07:46

I would use a Map. Something like this: Then you do not need the switch. Notice that this is react and typescript. If you are using plain react jsx instead of tsx you do not need the type Source

type Source = 'iconSend'| 'iconReload' | 'iconDownload' | 'iconAddDoc' | 'iconAddAgendaItem';
const icons: Map<Source, string> = new Map<Source, string>();

icons.set('iconSend', iconSend);
icons.set('iconReload', iconReload);
icons.set('iconDownload', iconDownload);
icons.set('iconAddDoc', iconAddDoc);
icons.set('iconAddAgendaItem', iconAddAgendaItem);

const loadIcon = (src) => {
  return icons.get(src);
};

Hope that helps!

@Radex That would be the same apart from the icons Map that would be _const icons = new Map();_ — kimy82, Sep 20 '17 at 11:19

score 1 · Accepted Answer · answered Sep 20 '17 at 07:49

Possible Ways:

1- Use require and in src pass the exact name of the image, like this:

<img src={require(`./${src}`)} alt={name} />

src should be:

icon-send.png
icon-reload.png
icon-download.png
icon-add-doc.png
icon-add-agenda-item.png

2- Prepare an object with key name and image, use that to get the image directly.

Like this:

import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

let hash = {
    iconSend,
    iconReload,
    iconDownload,
    iconAddDoc,
    iconAddAgendaItem
}

<img src={ hash[src] } alt={name} />

score 0 · Answer 3 · answered Sep 20 '17 at 07:57

Hi you can do it like this,

import React from 'react'
import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

const loadIcon = (src) => {
   let myDictionary = {
      iconSend: iconSend,
      iconDownload: iconDownload,
      iconAddDoc: iconAddDoc
   };
   return myDictionary[src];
}

const Option = ({id, name, isActive, src}) => {
  return (
    <div>
      <img src={loadIcon(src)} alt={name} />
    </div>
  )
}

export default Option

You can even make loadIcon as a separate file, and use it in all of your app, wherever you need it.

Is it possible to load a module dynamically from a string

3 Answers3