I have a React project created with CRA and yarn. I have some images in my assets folder that aren't being used. When I run yarn build and check the build folder I noticed that those images disaperead. I understand that this is for optimization, but I will need those images available.
How can I prevent those images being removed?
Since there are a few images that I didn't want to be deleted in the build process I move them to the public/ folder.
Related
I create a react project by using vite. When i run command npm run build to build my project then dist folder is create but my images are neither showing in dist/assets nor in deploy page on github.
My previous projects build without any problen dist/assets/ folder.I have already added base in vite.config.js.
I think that my images are not including when i build my project.I want to build my project with images.Sorry, for bad english.
I were putting image source like this: 'src/images/image.png'.thats was reason why build command not adding image to dist folder. Correct way to give image source like this : './images/image.png'.You can also give image src by import images.
I am having an apk file stored in a folder of my react js project src/asset/myapp.apk, I want to make it downloadable from my portfolio website. How can I achieve that?
Try putting your static files in public/ folder.
Then simply retrieve it by addressing "/path/to/file.apk"
When using src/ filename will be processed and changed relative to your webpack config which can vary each time you run a build which is not a good practice.
If you're using create-react-app read this documentation:
Using the Public Folder
Note: if you are using gatsby, please use static/ folder instead of public.
I have run create-react-app and started development on my app. yarn start works perfectly and the app runs in browser with several components and imported images. However, when I run yarn build not all of the images are moved to build/static/media (please see image below).
Folder structure and terminal output
There are no errors in the terminal output other than a warning about an arrow function which I have since removed with no success.
Is it still building an old version from when I only had panorama.jpg? Please advise.
You need to put your images to /public folder.
Boiler plate project created with create react app is 200MB+, with out us having wrote any code.
Most of the 200MB+ files is in the node_modules folder ( from all the lib it's downloaded). I can prevent re-download by installing most of the modules globally, but the modules still gets copied to the node_modules folder of the active project.
Is there a way to reduce the disk space size of my projects, ie. to have my active project reference the npm global libs directly as opposed to create a copy of the files in the node_modules folder.
What I've found so far:
'ejecting' create react app to customized: I didn't like dealing with
the mess of dealing with and having to maintain my own ejected
version of create react app.
ways to prevent download: share node.js modules across React apps? (install the lib globally)
I have problems with adding (background-) images via SASS. If I open my app on the sencha web server the images that are referenced in CSS (or SASS) can be found and are visible. But in the production build of my app the same images can't be found. It's because after the build, the images are being moved into a different location in the resources/ folder.
So I want to ask, what is the correct way in SASS for referencing images? How can I fix my problem?
The debug version:
images are in folder ./resources/images
in ./resources/sass/app.scss there is a line with "background-image: url('../images/pic.png')"
The build version:
images are now in folder ./resources/resources/images
the references in the CSS/SASS are now invalid!