How to add inline src to image ( Webpack 5 )

Question

I tried to add a string representation of [src] to an image, but it doesn't work.

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>
  );
};

Using import statement works well always.

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>
  );
};

How to make it possible ?

why cant you use the second approach which is working. You can not use the first approach. — teja463, Sep 19 '22 at 14:27

teja463 · Accepted Answer · 2022-09-20T08:09:19.537

You can use the webpack context and define a component like below and use that component instead. It is a sample component for SVGs

export default function Img (props) {
  const svgContext = require.context(
    '../resources/svgs',
    true,
    /.*\.svg$/,
  )

  return <img src={svgContext(`./${props.fileName}.svg`)} alt={props.altText} className={props.className} />
}

You can use that component

<Img fileName={'sample'} className="iconDropDown" />

How to add inline src to image ( Webpack 5 )

1 Answers1