New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

2 participants
@itaydr
Copy link

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

This comment has been minimized.

Copy link

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 join this conversation on GitHub. Already have an account? Sign in to comment