Skip to content
This repository has been archived by the owner. It is now read-only.

Importing png ends up as base64 image inside js code. #337

Open
itaydr opened this issue Jun 8, 2018 · 1 comment
Open

Importing png ends up as base64 image inside js code. #337

itaydr opened this issue Jun 8, 2018 · 1 comment

Comments

@itaydr
Copy link

@itaydr itaydr commented Jun 8, 2018

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 "./seal@2x.png";
import * as size3 from "./seal@3x.png";

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

Dom screenshot -
image

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
Copy link

@avioli avioli commented Jun 26, 2018

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).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants