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

Activity

heyimalex

heyimalex commented on Jul 12, 2019

@heyimalex
Contributor

Ahaha, that's interesting. It looks like it was fixed in url-loader's 2.x major, so we just need to update that dep in react-scripts. Related to webpack-contrib/url-loader#175

added a commit that references this issue on Jul 18, 2019
58fad40
locked and limited conversation to collaborators on Jul 23, 2019
added a commit that references this issue on Nov 21, 2019
f3dea17
added a commit that references this issue on Apr 10, 2020
5b562e9
added a commit that references this issue on Oct 8, 2024
c45714f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @heyimalex@peet

      Issue actions

        (master) Advanced config IMAGE_INLINE_SIZE_LIMIT=0 inlines all images (should disable inline) · Issue #7359 · facebook/create-react-app