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!
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 using font-awesome with my ReactJS application. Everything is fine but when I try to build my application for production use, the fonts are not bundled (all css and js files are bundled)
I use npm run build and I don't use webpack.
My question is: should I have something like a 'loader' in my package.json file to bundle the font files?
I get 404 not found in the production when it comes to font files such as .ttf and woff
Have a few images that I've dragged into VSCode for my portfolio site that are not showing when my site is deployed to Netlify. My frontend uses React.
Continuous deployment via GitHub is working as when I push changes to GitHub they show in the deployed version.
I've tried moving the images all around whether that be within the src folder or outside of it, and also changing src file paths of images but they still aren't showing in my deployed site. They look like empty boxes instead, as shown here. When I inspect these boxes in the browser their src attribute is visible.
Here is my current file structure and perhaps where the images are is part of why the images aren't showing deployed. Images are currently in the public folder but not within the assets folder.
I also have a build folder that was created by some build command which I believe built a production version of my app for deployment.
Would appreciate any help!
Remove public from your path and simply put:
<img src="taxi-715.png" />
By default react will know it's in a public directory.
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.
I ran the react build script and it has built the files into a build folder. However when I use serve (or any static file serve package), I am able to see the files from the src folder when I check the inspector. The react components files can be seen from the inspector.
The actual directory structure
The files in the chrome inspector
How can I solve this issue?