Put a dynamic src for an img (React/JS)

I created a function that returns a img tag with a dynamic src,

Everything works but I want to make it shorter :

Dirty version

import CHALLENGER from "../images/lol/emblems/CHALLENGER.png";
import GRANDMASTER from "../images/lol/emblems/GRABDMASTER.png";
import MASTER from "../images/lol/emblems/MASTER.png";

export const getImageRank = (rank) => {
    if (rank === "CHALLENGER") {
    return (
      <img
        src={CHALLENGER}
        alt="Emblem"
        title={rank}
        style={{ width: "150px" }}
      />
    );
  }

  if (rank === "GRANDMASTER") {
    return (
      <img
        src={GRANDMASTER}
        alt="Emblem"
        title={rank}
        style={{ width: "150px" }}
      />
    );
  }

  if (rank === "MASTER") {
    return (
      <img src={MASTER} alt="Emblem" title={rank} style={{ width: "150px" }} />
    );
  }
};

Cleaner attempt version

export const getImageRank = (rank) => {
    return (
    <img
      src={require(`../images/lol/emblems/${rank}.png`)}
      alt="Emblem"
      title={rank}
      style={{ width: "150px" }}
    />
  );
};

But for my cleaner attempt, the image is not shown 🙁

Answer

Kind of a solution; you can put the images to an object

const images = { CHALLENGER, GRANDMASTER, MASTER };

and then

<img
    src={images[rank]}
    alt="Emblem"
    title={rank}
    style={{ width: "150px" }}
  />