I have tried everything I can think of, as well as Googled this to death. I cannot get React to load a background image using inline styles. Here is my code:
const url = './assets/backgrounds/terzo1.jpg'
const style = {
backgroundImage: `url(${url})`,
backgroundSize: 'cover',
}
const Layout = props => (
<div style={style}>
TEXT
</div>
)
export default Layout
My assets folder is in the same folder as the Layout component.
I will note that I am using Create-react-app.
Thanks
If you are using create-react-app, for loading images and using them in your JS and CSS files, there are two approaches one could take.
Images on public folder
You can add your images in a directory inside public directory and use them as follows:
const style = {backgroundImage: 'url(/images/some-image.png)'}
Images in the same directory as your CSS or JS files
If you want to use images relatively and import them dynamically, You should put your images in the same directory as the CSS or Component that you want to use image in. One of the best ways to structure your codebase is to use component scoped structure. In this way, all stuff related to a component will go in the component's directory. This contains the images too.
For more info:
Use public folder for general assets outside of src directory
Import images directly into the component file in a scoped structure
This worked for me in a React 16.11.0 project created with create-react-app:
import emailIcon from '../../assets/images/footer/icons/email.png';
<div style={{ backgroundImage: "url(" + emailIcon + ")" }}></div>
Make sure the style you try to apply is correct. In my case, width and height styles weren't applied as it was: 140px !important, instead of just 140px. As soon as I removed !important, inline style has been applied.
Inspect image in chrome console. Open image url from rendered element in new tab. It may be wrong relative path or something wrong with server public folder setup. Try to fix image url in separate tab. Once you get the image, fix path in the component accordingly
Related
Hi does anyone know why my png file is not displaying, even if i set it outside of the button element, it does not work.
I have used a JPG and it works but PNG is not, is there any obvious reason why PNG would not be showing up.
Here is an image of my code
Image of code here
First of all wrap the src in {}
Then if using Webpack; Instead of: <img src={"./logo.jpeg"} />
You may need to use require:
<img src={require('./logo.jpeg')} />
Another option would be to first import the image as such:
import logo from './logo.jpeg'; // with import
or ...
const logo = require('./logo.jpeg); // with require
then plug it in...
<img src={logo} />
I'd recommend this option especially if you're reusing the image source.
I don't know the full context, but assuming this React project is using webpack or was created with create-react-app, the image files in your src directory are not automatically being copied to the built application,
Try importing the image to the file where you use it:
import orbImage from "./org.png";
Then use it like so:
<img src={orgImage} />
I will try to help you,
on the other hand for your next message try to review the formatting inspire you from the other posts thx
for your png maybe probleme is your src
// The image.png file must be in the same folder as the JS file
// We import the image using its path
import image from './image.png';
and maybe try to add width="200"
- public
- src
- assets
- icons
- plus-purple.svg
This is my file structure at the moment.
I have to use 'background-image:url()' css property now.
I don't know what the correct url link would be, if I wanna import plus-purple.svg in mycase.
My bottom line is that,
I'd like to know proper url link when I try to import image from NOT public folder! (for my background-image css property)
thank you so much!
I'M USING NEXT.JS btw!
import './App.css';
import Dashboard from './Dashboard.js';
function App() {
return (
<Dashboard />
);
}
export default App;
I have copied the html code in Dashboard.js and same with css file which I copied in app.css , I have modified both css and js html code accordingly to react. There are no errors compile time
or run time. It just doesn't picks up code. Please tell me what could be the problem here .
One correction -: my css file is connecting with js file as I can see few of my css codes are running but only 2-3 css lines are running , rest are not.
I guess its issue related to difference between normal html css and react html css. I have copied html code of a normal html css bootstrap template and same done with css file too. I changed much of the code according to react rules but I guess still something I'm forgetting which I'm not able to figure out. I'm just feeling something is wrong related to classnames which I'm using to address into css codes. Please look into my js and css file where I'm going wrong.
I have uploaded Dashboard.js , Dashboard.css and App.js in git
Please check here - https://github.com/Agent00XX/test-react
I have an .scss file with a name say Books.scss and a related react component Books.js in a folder.
There is another .scss files named Books.scss and a related component Books.scss is another folder.
I correctly import the properties of the .scss files in the first component using ./Books.scss but when I try to make changes in the file for a particular div className, say "tableOfContents", there is no effect on the component. This className also exists in the other .scss file.
Oddly, the changes to the first component are being reflected when I edit the className of the second .scss file.
Does anyone have an idea why this would have happened?
Both the components are similar except for addition/deletion of subcomponents. Code duplication is bad, but there was no other go to speed up work which will be regretted later on.
Sorry, turns out that the className was nested within another class which is why the css properties from the other sass file was showing up. As you mentioned #Umair, makes sense why it behaved this way.
I am learning Gatsby. I have a component called Hero which is for displaying a banner for the blog I am building.
import React from 'react';
import styled from '#emotion/styled';
import { Link, graphql, useStaticQuery } from 'gatsby';
const ImageBackground = styled('div')`
background-image: url('images/plans-background.jpg'); <--- this url doesn't make sense to me
background-position: top 20% center;
background-size: cover;
/* background-color: red; */
`;
const Hero = () => {
return (
<ImageBackground>
<h1>Frontend Masster dsfsdfsd</h1>
<p>
hello
<Link to="/about">learn about me</Link>
</p>
</ImageBackground>
);
};
export default Hero;
I'm using the screenshot to show the folder structure
according to the structure, in order to reach the background image I need a url like this
`../../../static/images/plans-background.jpg`
And that's what the IDE prompted me to type when trying to reach the image file. However this url doesn't work as expected. There's no background image showing. and I changed it to
`images/plans-background.jpg`
The background image showed up magically.
So I don't understand why this url is working. Is it something special about the folder static or is Gatsby doing something behind the scene?
Also when I opened up the devtool to inspect the resources that got loaded, I didn't find this static file, neither the background image file.
I am really trying to understand how these pieces work together
Yes, this is the expected behavior for your assets in /static, read more about it in the docs: Using the Static Folder.
However, adding your images there is not a best practice because they won't be optimized with Gatsby's build time image processing and gatsby-image.
The docs also have good resources for this: Using Gatsby Image to Prevent Image Bloat, or Working with images in Gatsby.