Skip to content

(master) Advanced config IMAGE_INLINE_SIZE_LIMIT=0 inlines all images (should disable inline) #7359

Closed
@peet

Description

@peet

Describe the bug

I have forked from master in order to test/use the IMAGE_INLINE_SIZE_LIMIT environment variable to disable inline images (added in #6060). What I have found is that setting IMAGE_INLINE_SIZE_LIMIT=0 in .env does not disable inline images (as suggested by the docs) - but instead sets no limit, meaning all images are inlined, regardless of size.

I tested by building a project with 2 images - one larger than 10,000 bytes and one smaller:

  • With no config, the build/static/media folder contained the large image.
  • With IMAGE_INLINE_SIZE_LIMIT=0, the folder contained no images.
  • With IMAGE_INLINE_SIZE_LIMIT=1, the folder contained both images.

Did you try recovering your dependencies?

yarn --version
1.16.0

Environment

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 8.16.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: 1.16.0 - ~\scoop\apps\yarn\current\Yarn\bin\yarn.CMD
    npm: 6.4.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.1.0
    Internet Explorer: 11.0.18362.1
  npmPackages:
    react: ^16.8.6 => 16.8.6
    react-dom: ^16.8.6 => 16.8.6
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. Create new project using react-scripts from master (after Add environment variable to control image inlining threshold #6060 was merged)
  2. Make the App component import and use an images larger and smaller than 10,000 bytes
  3. Add a .env file containing IMAGE_INLINE_SIZE_LIMIT=0
  4. Run yarn build

Expected behavior

The built project should contain the image files, and they not be base64 encoded within the js bundle

Actual behavior

The built project contains no media files (even the large one, which would not normally have been inlined). They are instead inlined and base64 enconded with in the js bundle.

Reproducible demo

https://github.com/peet/cra-inline-images
run yarn build and observe the lack of a build/static/media folder
change the .env file to test other settings of IMAGE_INLINE_SIZE_LIMIT

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions