Skip to content

Add environment variable to control image inlining threshold - #6060

Merged
ianschmitz merged 7 commits into
react:masterfrom
peterbe:3437-environment-variable-to-disable-inlining-images
Jun 18, 2019
Merged

Add environment variable to control image inlining threshold#6060
ianschmitz merged 7 commits into
react:masterfrom
peterbe:3437-environment-variable-to-disable-inlining-images

Conversation

@peterbe

Copy link
Copy Markdown

Fixes#3437

I verified that this worked by editing the default application (packages/react-scripts/template/src/App.js) to reference a logo.png image that I made up. The file was 5,237 bytes and when I ran yarn run build the build/static/js/main.8204aa3b.chunk.js did contain the base64 string. Then, running IMAGE_INLINE_SIZE_LIMIT=5000 yarn run build this time the build/static/js/main.499ec856.chunk.js file was -5.27KB and the file build/static/media/logo.adb700a2.png existed.

@peterbe

Copy link
Copy Markdown
Author

Can someone guide me in what's wrong with those two failing Travis builds?

@peterbe

Copy link
Copy Markdown
Author

@Timer apart from the conflict, which I can fix, can you help me with the failing Travis test and a review?

@peterbe
peterbeforce-pushed the 3437-environment-variable-to-disable-inlining-images branch from c1d1606 to ca6f07eCompareJanuary 10, 2019 15:00
@stale

staleBot commented Feb 9, 2019

Copy link
Copy Markdown

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stalestaleBot added the stale label Feb 9, 2019
Comment threaddocusaurus/docs/adding-images-fonts-and-files.md Outdated
@stalestaleBot removed the stale label Feb 9, 2019
@stale

staleBot commented Mar 11, 2019

Copy link
Copy Markdown

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

peterbeand others added 3 commits April 1, 2019 14:58
…ble-inlining-images' into 3437-environment-variable-to-disable-inlining-images
…able-inlining-images
3437 environment variable to disable inlining images
@rohan-deshpande

rohan-deshpande commented Apr 13, 2019

Copy link
Copy Markdown

I need this functionality, but the other way round, ie., I want everything to be base64 encoded.

Would be good to see this get merged. Seems like the issues are arising due to a missing module?

Error: [BABEL]/tmp/tmp.74WMXrb0ri/test-app-typescript/src/index.tsx: Cannotfindmodule'@babel/plugin-transform-react-jsx-source'(Whileprocessing: "/tmp/tmp.74WMXrb0ri/test-app-typescript/node_modules/babel-preset-react-app/index.js$1")

@Rogdham

Copy link
Copy Markdown

The corresponding issue #3437 has got some traction in the meanwhile, with different people saying that it is quite an issue for them due to CSP blocking data:, and that they would like this PR to be merged.

@iansu I see you assigned yourself on this PR a while ago. Could you please tell us how we should proceed for this PR to be merged? What are the required steps? 🙏

@ianschmitzianschmitz changed the title environment variable to disable inlining imagesAdd environment variable to control image inlining thresholdJun 14, 2019
@ianschmitzianschmitz added this to the 3.0.2 milestone Jun 18, 2019
@ianschmitz
ianschmitz merged commit 9d70c7a into react:masterJun 18, 2019
@ianschmitz

Copy link
Copy Markdown
Contributor

Thanks @peterbe!

@locklockBot locked and limited conversation to collaborators Jun 23, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Disable inline images for images that are less than 10,000 bytes

8 participants

@peterbe@rohan-deshpande@Rogdham@ianschmitz@some1else@bondz@iansu@facebook-github-bot