3

No background-image visible with the setup below. As a debugging step, I have tried setting background: pink within const background and this does work, confirming that emotion is running correctly.

When opening React Dev Tools extension I can see background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);applied without an error.

What could my issue be please?

My file structure looks like below:

frontend/
  src/
    images/
      page_background.png
      page_backgroundgradient.png
    pages/
      index.js

My index.jsthat I am trying to add a background image to.

...
import { css, Global } from "@emotion/core"


const background = css`
  background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);
`
<div css={background}>
   ...
</div>
isaacsultan
  • 3,784
  • 3
  • 16
  • 29
  • Have you tried passing the full path to the file at CSS `url()` function? – guest271314 Feb 23 '19 at 21:34
  • @guest271314 That would be: `url(src/images/page_background.png)`? Because if so, no luck! – isaacsultan Feb 23 '19 at 21:41
  • That is not a full path. – guest271314 Feb 23 '19 at 21:42
  • @guest271314 I tried `url(/Users/username/reponame/frontend/src/images/page_background.png)`, which I believe is full path. No luck either. – isaacsultan Feb 23 '19 at 21:44
  • https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls – guest271314 Feb 23 '19 at 21:45
  • @guest271314 I'm sorry, I'm very confused. Do you mind spelling it out for me? – isaacsultan Feb 23 '19 at 21:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188939/discussion-between-isaacsultan-and-guest271314). – isaacsultan Feb 23 '19 at 21:49
  • 1
    images in your `src` folders are not copied when build, so the path you use doesn't point to a real image file. You are likely to find the path to the built image in your graphql query though, let me know if you're still stuck on this. – Derek Nguyen Mar 03 '19 at 07:24
  • Hi @DerekNguyen, I am actually not doing a graphql query to get the image file. My usage seems very similar to the 2nd example here https://www.gatsbyjs.org/docs/adding-images-fonts-files/ . So yes, still stuck! – isaacsultan Mar 03 '19 at 12:53
  • Alright, I posted a few ways to get images, let me know if it helps – Derek Nguyen Mar 03 '19 at 14:23
  • I just realized you were the same person asking the other question in `emotion` tag -- hope my comment helped you over there too – Derek Nguyen Mar 03 '19 at 14:26

1 Answers1

14

So as stated in the link you posted in the comment, there's multiple ways to include image/assets with gatsby:

  1. Query the image from graphql
  2. import the image, get path
  3. Copy the image to static directory

Set up

Say you have a component like this:

// src/pages/sample.js

import React from 'react'
import { css } from '@emotion/core'

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url( ... );
`} />

Query it

PublicURL

If you're using any of the default starters, it's likely that your src/images folder has been set up with gatsby-source-file-system so Gatsby know about your images. Say you know the name of the file, you can query it like so:

{
//       ⇣ `base` is file name with extension.
  file (base: { eq: "image.png" }) {
    publicURL
  }
}

As described in the link, querying the field publicURL will give you the path to the file name:

export default ({ data }) => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${data.file ? data.file.publicURL : 'your/fallback.png'});
`} />

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      publicURL
    }
  }
`

ImageSharp

Gatsby usually comes with sharp, which allows you to transform images & more. For a simple example, this query resize the image to 200px width:

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      childImageSharp {
        fixed(width: 200) {
          src
        }
      }
    }
  }
`

And you can access it at data.file.childImageSharp.fixed.src.

Import the image

Let webpack handle it:

import myImagePath from '../relative/path/to/image.png';

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${myImagePath});
`} />

Copy it to static directory

Create a directory named static at your root folder, unless there's one already. Copy your image into it:

root
  |--src
  `--static
       `--image.png

All files in static will be copy directly to build, so you can link to the image like this:

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(/image.png);
`} />

If you're using pathPrefix in gatsby-config.js, import withPrefix from gatsby and wrap it around the image path.

Here's a codesandbox for the first 2 methods.

Hope that helps!

Derek Nguyen
  • 11,294
  • 1
  • 40
  • 64