在 Gatsby.js 中，使用图像作为 li bullet

Question

我正在尝试将图像用作“li”要点。我正在尝试将图像作为“StaticImage”导入以在样式组件中使用它，如下所示：

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

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

然后我尝试了几种不同的解决方案，将其添加为要点，例如，作为伪元素：

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

但我总是得到 [Object object]。有没有办法做到这一点？

Answer 1

为什么不直接使用：

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

甚至：

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

您可能需要这样做：content: ${props => props.bullet}，具体取决于您的实施

如果您想使用自己的组件，可以尝试使用props，按照最后一种方法：

li {
     &:before {
        content: ${props => props.Bullet}
     }   
}