时间戳

首页 > 解决方案 > 如何让我的自定义光标在 create-react-app 中工作？

css - 如何让我的自定义光标在 create-react-app 中工作？

问题描述

我正在使用 create-react-app，并创建了一个按钮。在此按钮的（行内样式 css）中，我使用了 cursor: "url(Pin.png), auto" 但我的光标没有改变！我可以将其更改为任何其他内置光标类型（例如指针、自动、文本、十字准线等），但是当我尝试将其设为 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>

标签： cssreactjspngstylingweb-frontend

解决方案

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

在浏览器中加载页面时，默认情况下，React 在执行诸如从加载图像或除非图像等已导入等操作时会查看公共目录而不是src 。然后图像需要位于正确的src目录中。'Pin.png''assets/images/Pin.png'

推荐阅读