The project structure of Reactjs looks like below:
->public
->background.jpg
->src
->App.js
->App.css
I am trying to load background.jpg in App.css like this:
background-image: url("../public/background.jpg");
But the image is not getting imported. Instead it says the imports outside of src are not allowed.
How can I resolve this problem?
create-react-app version: 3.4.0
Create an asset folder inside the src folder and import it again
You can't directly import from public folder, but if you wants to do, you can pass the full url then it'll work.
Working code is here:
.body {
background-image: url("http://localhost:3000/background.jpg");
}
Related
Trying to import image folder from public folder to src folder in react but i kept getting error messages in the terminal and my chrome
[the vscode screenshot](https://i.stack.imgur.com/gtyL0.png)
Your image is inside a Image folder. So the import should be
import Airbnb from '/Images/airbnb.png'
If it gives webpack import error you can do it like this way
<img src='/Images/airbnb.png'/>
Here /Images/airbnb.png gives a direct link to the image of the public folder.
you need to import from the folder in which the file exists
import Airbnb from '../../public/Images/airbnb.png'
I have an app that I created using create-react-app and I want to set the background image of the header element. I tried using external CSS in Home.css and imported it from Home.js with this code:
header{
background-image: url(./images/bg-hero-mobile.svg);
}
The above approach is showing me this error:
./src/Home.css
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/Home.css)
Error: Can't resolve '/images/bg-hero-mobile.svg' in
'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'
Here is my file structure:
Error: Can't resolve '/images/bg-hero-mobile.svg' in 'C:\Users\User\Documents\own-authenticator\frontend\rca-authenticator-frontend\src'
it's a path issue. The webpack was not able the find the file on the given path i.e the file does not exist on the provided path.
To give the path as per the current app structure
header{
background-image: url(../public/images/bg-hero-mobile.svg);
}
Or you can simple put the images folder under src directory.
Since the new release of create-react-app v4.0.1 it is not acceptable to access images through a css file but you can access it from jsx and inline css. If you want to access a resource like images,fonts you have to put them in src folder. In this case I have to move images folder into src folder and use this code to access it:
header{
background-image: url(./images/bg-hero-mobile.svg);
}
I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.
Any ideas? I don't want to use npm eject
The icon.svg is in public/images
background-image: url(/images/icon.svg);
Failed to compile.
./src/Components/style.scss
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''
In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.
As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).
This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.
I think it is deprecated in CRA 4, (after all.. it was a breaking change..)
there are some workarounds using craco but I suggest to move these files to the src folder.
Try to change to this: (webpack should resolve this to the 'real' path)
background-image: url(./icon.svg);
I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:
import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';
<Icon />
Source:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?
I am trying to add image to the carousal from the public/image folder in the carosal.js file.
My component tree looks like this:
I wrote " ../../public/image/cover1.png"
but getting an error saying:
Module not found: You attempted to import ../../public/image/cover1.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Assuming this is a create react app project, the public folder is served statically, so instead of directly trying to import the image from the public folder you can simply reference the image in your code without the relative path.
As an example, you could do the following
<img src="image/cover1.png" />
This way you are not actually importing the image file like its a module, but instead you are having the server serve it the browser statically.
I want to import img when using typescript in my react project
import * as img from "./assets/webpack.png";
But I got the error TS2307: Cannot find module './assets/webpack.png'.
I search arround and find the solution saying that I have to add
declare module "*.png" {
const value: any;
export default value;
}
But I don't know where to add it.
I created a declarations.d.ts file at my root project and add it to the file but nothing happens. I still got the error
Could you show me how to add it. Thank you in advanced
The solution is that you have to put declarations.d.ts in the asserts folder, not the root folder. I have to be in the same folder with your image files