#javascript #reactjs
#javascript #reactjs
Вопрос:
Я новичок в React, и теперь я использую SCSS вместе с последней версией React в своем проекте. В моем файле SCSS у меня есть
display: flex;
flex-direction: column;
justify-content: space-between;
background: url(../../assets/img/comp-img/game-box-bg.png) no-repeat 100% 100%;
и MyComponent.jsx импортирует этот файл SCSS с установленным пакетом node-sass.
Проблема в том, что когда я проверяю элементы, я вижу этот результат в браузере:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAACQCAYAAAD6FB5mAAAABHNCSVQICAgIfAhkiAAAB3NJREFUeF7tnc LHUUQx6swERUUomAkOShGiYcEDehBQQ/mkL/Z6x6yhz2sYA4bMOAKERJhA5tDBKMl39ATZp/z5k13VddMz6uBZcOmq3rm 5n Vd3TzRTXIhXgRd5VpZsSkTeI6BIRvWTmfyplY K2OTAi8mYS9/LI76H/gx2up8x8bKJeRSdNgRGRe0ot/iaiQ2Z ofRT3bwZMCLyIRHdUSrymJkfKH24mLcE5gsi lipyn1mfq704WLeEpgfiOhthSrnzHyosHc1bQKMiAAIwGiuX5j5D40DT9tWwLxPRN8ohTloodHvnrEVMGhb0MaUXi Y aDUeA67VsDcIKLPFAI1MXbpP9 gDlh5lMFWHfTVsBg/IJxTOl1xMxnpcZz2LUCBg0/OgClV4ApVW7MTkS0YJoZWLbWK1PFyJj5pxovTE2frVRlAabmW1DqWxtVjhJTqvwOO4M2Jhr/GmwCTA1VDXyKiHYcc8zMTw1uxc1FK42/NiTzKzM/clPVIKN9AdPMzGVr45hrRHRb8SJGdFkh3lZTEbGYj2lq9N9KVWYxg9lUO9MEGBQlEYk5/xrVkdaniFiskmlmermlEmPRzjTTO2sGTKrOfiQiLH/VXE2EZ1oDo40AAOgZMx9pyHrYtgZGO57pNF18qWkNDD6huGvwxp4TEeC8NPBVxUVTYFI7o51m7oR8wsw/V1HVwGmLYCx6Z510p8x8YqCjuYvmwBiXGrhb5JrmVsFYhGj6b/ni4mhNgkml5hYRXTesQxZVcloGY11qwPg3Zn5oCLvYVbNgUqnRzmwOCfeEiB7M2ZUWkUutg8G4BlFnbZhmExDGOQ/nWO c5p5uNQ0mlRqraMBQ6cFC9EcegNJXczeJ6CpupHkwFau0PqjHCZD5Z gi8m766BdfM7wu asAU6mXNlSCUMVhGRQ hCr jmVjisJyHtDGa0JDNobhGsGH7S4e7TdEJs5ABJKUfeD1M 7jkMqDbgvXLgvwMDvnV9frwZMKjW1OgMVuI67XBWYBAd19nfuShpnuDowDj01YwTD7lYJZg1wVgumV62hQ2A9AK1ealYNptch8OytmUBbPZgeHKxLs4xGmwDY5mQvwHQPLyI1gp5VAO0VmF6nAKVn0e3O3oHpVW3YOEizP02VktI53UswvaoNoRFUb4tre/YazAYgTFVrtkUxLUEBpidnmqRCCZodUIAZeM8xtZt2ewKgC/MkpsXiojNEq58REaa2nwWYCUqnkgRA NkZsp/gskuC R3AwPzOhW27AkyGiqlHBzD4QalCJBtX9zf8G3/ruuKd2FgjDQi4MHfzF36P7dEZYDLBeCUPMF5KZ YTYDIF80oeYLyUzswnwGQK5pU8wHgpnZlPgMkUzCt5gPFSOjOfAJMpmFfyAOOldGY ASZTMK/kAcZL6cx8AkymYF7JA4yX0pn5BJhMwbySBxgvpTPzCTCZgnklDzBeSmfmE2AyBfNKHmC8lM7MJ8BkCuaVPMB4KZ2ZT4DJFMwreYDxUjoznwCTKZhX8gDjpXRmPgEmUzCv5AHGS nMfAJMpmBeyQOMl9KZ fDGqaxDR6vjg5qhvbn6nxb0s329LVTmvUTyngKbYKzE6WDim5Dfx74DscpwbX5qgdnUqdrWhWsD0j2PFxjkh1KEEyiKtyxcK4Sh5/IE08HBnsZNHa87xwvhDaaDg0PcFnt2yxwgNvOcAwzuYdFnt wzGDz74o jmhPQXCUGz4xv24/nfPgl5z0nGOjSzIGh3hDnBrOoM1u8xR/Lb24wTR1M7QlubjDRzmyhPTeYZs4 9iwtyOt12D d0DC0s9BbW3Yc6ja20eztFVXZthKjeRNEBPtKYuPP0ivGMtZg0mZrmmOoENSM0EwFMNrjDhd7amtp8be0K5paTjveYVt2zRWDyxH1SsGgCtNsQRilZccrnQ3GYBv2aFsm1DNZYFKX lvl9uvHMVG2m0wuGLQrmnHLGTMf7b6tSDEZjIhga9s7SsmiwZ8o4CQwacyCA9k0DX6M8idCuRCSGbMREYzuMcovvbDH8EGp8T7a7Swx6ZBN7fGFEXrJfLumgNE2 BHaz4SysyozCFLGmKUAyigYgyAl
Почему React автоматически преобразует URL-адрес изображения в базовый 64???
Что я делаю не так??
Комментарии:
1. Почему это проблема? Это экономит ваш сетевой запрос. Мне просто любопытно, почему вы хотите от него избавиться
2. Это проблема webpack, а не проблема react. Вы должны иметь возможность отключить это в своей конфигурации webpack
3. @JonasGrumann кэширует ли его браузер?? при следующем посещении пользователем
4. Конфигурация webpack по умолчанию (используемая create-react-app) использует загрузчик URL- адресов и имеет ограничение в 10 000 байт, при котором он считается встраиваемым. Переключитесь на загрузчик файлов, уменьшите ограничение или установите кодировку на false, чтобы увидеть фактический URL.
5. @ArianShahalami Я вижу, это проблема с кэшированием, я не думаю, что он кэшируется браузером