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.
Related
So basically, I'm new to Django and I have been experimenting with Django in building my website portfolio. I decided to experiment with Django if I could use python, JS, Bootstrap, CSS and HTML at the same time, all went well till I came to an obstacle which has been a hassle to overcome. Initially, in my static folder, I have a folder called CSS that contains a file of CSS as main.css and another folder within the Static folder, called Images which contains some Jpg images.
So after writing my code in my base folder as home.html, I then proceeded to the main.css folder and wrote:
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
main {
font-family: Heebo,sans-serif;
}
.Landing {
min-height: 100vh;
background:url("./images/Laptop.jpg");
background-size: cover;
}
So basically where the initial problem is(Where I labeled #4), when I host my server I was expecting the image to come up in the background of the website, but it didn't. I then proceeded to think it should be a URL or calling problem, so instead of using a URL I tried:
<img src="{% static 'images/Laptop.jpg' %}" >
But this at #4 didn't show up on the background of the page either, and I had doubts that it would show up because that's more of HTML than CSS.
At this moment I'm out of ideas and wanted to see if anyone has any solution which could be helpful.
The image format is different both paces you have mentioned. One ends with .jpg and other .jpeg.
Try specifying the full path for the image
Like /static/images/Laptop.jpg
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"
I'm new to Gatsby.js and I was wondering how to change the direction to RTL. I couldn't find the main index.html. I'm sure there is a way, but I found nothing in the documentation.
You won't find exactly "how to change website direction in Gatsby" because, as any other web framework, this kind of customization belongs to CSS (or other preprocessed files such as SCSS).
You can find extensive documentation about built-in styling support at: https://www.gatsbyjs.com/docs/how-to/styling/built-in-css/
You must not customize the index.html (which is placed in the public folder) because it is generated in each build, so if you change something in it, as soon as you build your site again, your changes will be lost.
Your best chance is using global styles, which you can also find documentation at: https://www.gatsbyjs.com/docs/creating-global-styles/
For example:
import React from "react"
import "./layout.css"
export default function Layout({ children }) {
return <div>{children}</div>
}
And in your layout.css:
div {
background: red;
color: white;
direction: rtl;
}
I have an issue with my react-application when I build it with electron-builder.
I just want to show an application logo with either dark or light font-colour depending on the currently selected theme. For that, I created 2 separate SVG's (dark and light).
The problem
If I start the react-app with react-scripts and electron ., my SVG Icon gets rendered (everything works as expected).
If I create a full electron build of the react-app and afterwards start the build, the icon only appears for the first render.
If the screen gets rerendered, the SVG image is not visible.
I also looked into the dev-inspector of electron and the src property for the image is exactly the same as for the first render.
The imports of my 2 logos:
import LightLogo from "./images/lightLogo.svg"
import DarkLogo from "./images/darkLogo.svg"
The img component:
<img
className={styles.logo}
src={props.theme === Themes.DARK.name ? LightLogo : DarkLogo}
width={"40%"}
alt={"Logo"}
/>
The tag in the compiled app:
<img class="jss742" src="./static/media/darkLogo.667e0ffc.svg" width="40%" alt="Logo">
Logo not working after second render
Unpackaged app.asar
This is my first question, so if you need any further information, feel free to ask.
Thanks
I was able to fix this by adding <base href="./" /> to my index.html file.
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