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);
}
Related
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");
}
I am new to Gatsby and React. I have set up a site using LekoArts' gastby-theme cara
I understand that what I create in the theme folder (src/#lekoarts/gatsby-theme-cara) will shadow the files seen in the theme's src folder. Which can be viewed here on github:
https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-cara/src
What I want to do is shadow the "templates/cara.tsx" file, there I am able to affect the size of different sections in the theme.
The issue is that that .tsx file has many other components that need to be imported that I don't want to shadow, how do I import these files that are on the themes directory (without having to shadow them as well)?
Here's a screenshot of the "templates/cara.tsx" file and all it's imports underlined
I have tried shadowing all files that need to be imported, but it got out of hand as they all have their own dependencies that need to be imported as well.
Thanks for your time
For anyone in the future that gets confused by this same thing:
You can access the theme's files using:
import Layout from "#lekoarts/gatsby-theme-cara/src/components/layout"
If you are using a different gatsby-theme check 'gatsby-config.js' look for plugins: [ { resolve: use this path for accessing it's src,
for my theme it gives "#lekoarts/gatsby-theme-cara" so I then add src/components/layout to access the layout component (without having to shadow it locally).
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 am trying to import images from an assets folder in my src folder in my react app but for some reason the path is not being recognised.
My folder structure is as follows:
|src
|Assets
|Common
|Components
I am trying to import the image located in the assets folder from the components folder. I was able to import from my common folder to files in the components folder by doing the following:
import * as Constants from '../Common/Constants';
However following this same structure for loading images has not worked
<img src = '../Assets/myimg.png'></img>
What am I doing wrong?
Thanks
In your code you're providing the image source based on your React app's location, which is neither related to web application's root location, nor media or static files locations (to be configured), so the browser will not know how to render it. Depending on what server you use (nginx, Express) you have to configure your static and/or media files and then specify in your image source based on how you configured.
In your present situation you can do the following:
Import
const reactImage = require("../Assets/myimg.png");
And then use it:
<img src={reactImage.default} />
If you had media files already configured on your server and properly resolving, it would be just
<img src="/media/Assets/myimg.png" />
Assuming media location is already configured and is pointing to the parent directory of your Assets.
In your example you were assuming the relative path of your React import and the image source hardcoded into image tag are same, but they are actually not.