如何使我的自定义光标在create-react-app中起作用？

Question

我正在使用create-react-app，并创建了一个按钮。在此按钮的（css样式中）中，我使用了光标：“ url（Pin.png），自动”，但我的光标没有改变！我可以将其更改为任何其他内置光标类型（例如，指针，自动，文本，十字线等），但是当我尝试将其设置为此png（并且也尝试过svg）时，它将无法正常工作。

如果我尝试将png渲染到页面上，则效果很好。 png与其他js / jsx文件一起位于我的src目录中，另一个png正确显示为背景也是如此。

我已经安装了resolve-url-loader，但这也没有帮助。

<div>
<button 

style={{cursor: "url(Pin.png), auto;", position: "absolute", 
top: "35%", right: "11%", height: "340px", width: "1010px", border: "0px", 
outline: "none", background: "transparent"}} 

onClick={this.openJoyModal}> 
</button>
</div>  

Answer 1

您应该像@JulioBetta在评论import Pin from 'src/Pin.png';中所说的那样导入它。

在浏览器中加载页面时，默认情况下，React在执行诸如从{{1}加载图像的操作时，查找的是 public 目录，而不是 src 。 }或'Pin.png'，除非已导入图像等。然后，图像必须位于正确的 src 目录中。