0

I am trying to use an image as an "li" bullet point. What I am trying tis to import the image as a "StaticImage" to use it in Styled Components, like this:

import { StaticImage } from "gatsby-plugin-image";

export function Bullet() {
    return <StaticImage src="../images/bullet.png" alt="li bullet" />;
}

Then I'm trying several different solutions to add it as a bullepoint, for example, as a pseudo element:

        
li {
    &:before {
        content: ${Bullet}
    }
        
}

But I always get [Object object]. Is there any way of doing this?

Sergi
  • 1,192
  • 3
  • 19
  • 37

1 Answers1

0

Why you don't use directly:

li {
    &:before {
        content: '../images/bullet.png'
    }
        
}

Or even:

import bullet from '../images/bullet.png'
li {
    &:before {
        content: ${bullet}
    }
        
}

You may need to do: content: ${props => props.bullet} depending on your implementation

If you want to use your own component you can try using the props, following the last approach as:

li {
     &:before {
        content: ${props => props.Bullet}
     }   
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • That works in React but are you sure it works in Gatbsy? It wasn't working for me. It doesn't find the image (404) even though is there and the path on the console error is correct. – Sergi Feb 10 '22 at 15:44
  • If works in React works in Gatsby. Try modifying the relativity of the path or starting from the root: `./path/to/image` – Ferran Buireu Feb 10 '22 at 15:47