Как добавить относительный путь к изображению в Webpack?

Question

[Vector_Proper]

Хочу подключить изображение при помощи такого кода, но почему-то не выходит

import React from "react";
import cn from "classnames";
import "./index.scss";

export const PanelItem = (props) => {
  return (
    <li className={cn("panel-item", props.className)}>
      <a href={props.linkData.url}>
        <img src="./image.png" alt={props.iconData.alt} />
        <span>{props.linkData.text}</span>
      </a>
    </li>
  );
};

Зато при помощи обычного импорта отрабатывает без проблем

import React from "react";
import cn from "classnames";
import "./index.scss";
import image from "Icons/image.png";

export const PanelItem = (props) => {
  return (
    <li className={cn("panel-item", props.className)}>
      <a href={props.linkData.url}>
        <img src={image} alt={props.iconData.alt} />
        <span>{props.linkData.text}</span>
      </a>
    </li>
  );
};

У меня json с большим количеством изображений, которые я хотел бы вставить при помощи этого способа, но не могу.

Как мне решить эту проблему ?

Comments

[Антон Горецкий]

напишите отдельный модуль, в котором разбирайте ваш json, импортируйте изображения в объект, а его экспортируйте наружу. В любом другом модуле импортируйте объект и используйте.