Importing png ends up as base64 image inside js code.

[itaydr]

Versions -

"react-scripts-ts": "2.15.1"
"typescript": "^2.8.1"

Issue - Importing a png file from a react component, and using it inside an .

Result - png file doesn't end up in the dist folder as the png, rather ends up as a base64 string of a png inside the js code, which means all images are downloaded once and not on demand.

Expected result - png image in the dist folder, and the link to it ending up in the js variable.

import * as React from "react";

interface IProps {
  className?: string;
}

import * as size1 from "./seal.png";
import * as size2 from "./[email protected]";
import * as size3 from "./[email protected]";

export const SealIcon: React.SFC<IProps> = props => (
  <img
    src={size1}
    srcSet={`${size2} 2x,${size3} 3x`}
    className={props.className}
  />
);

Dom screenshot -

Checked out the disst folder, the png assets aren't inside after building for production and dev.

Is the this the correct way of using png assets?

I tried importing like import size1 from "./seal.png"; which resulted in the same behaviuor.

Any help would be greatly appreciated!

[avioli]

The default webpack config (within packages/react-scripts/config/) uses url-loader and has a limit of 10,000 bytes under which it is considered embeddable. Switch to file-loader or lower the limit (you'll probably need to eject).