Laravel项目中div内自定义图片光标不显示问题求助

问题描述 #

希望鼠标指针位于指定div内时显示自定义图片光标，但目前仅显示备用的crosshair光标，无法看到图片光标。使用网络图片URL可正常显示，推测是本地图片相关问题，但浏览器调试得到的图片路径http://site.loc:9080/img/mark-facsimile.png能正常打开图片，替换asset为url函数也无效果。

相关代码 #

FileController.php #

public function addMarkClientFile(File $file)
{
        $imagePath = asset('/img/mark-facsimile.png');
        return view("documents.addMark", compact("imagePath"));
}

addMark.blade.php #

@extends('layout.master')
@section('style')
    @parent
    <style>
        .canvas-with-cursor {
            cursor: url('{{ $imagePath }}'), crosshair !important;
        }
    </style>
@stop
@section('content')
....
<div class="canvas-with-cursor" id="pdf-preview"></div>
...
@stop

排查与解决步骤 #

• 检查图片尺寸：浏览器对自定义光标图片的尺寸有严格限制（通常最大为32×32像素），若图片尺寸超出范围，浏览器会自动忽略并使用备用光标。将图片缩放到符合要求的大小后重试。
• 补充光标热点与格式声明：在cursor属性中明确指定光标热点（鼠标点击对应的坐标），同时确保图片格式为浏览器支持的类型（如PNG、GIF、CUR），示例：

  cursor: url('{{ $imagePath }}') 0 0, crosshair !important;
  

• 强制刷新清除缓存：浏览器缓存可能导致新图片无法加载，按Ctrl+Shift+R强制刷新页面，或清空浏览器缓存后重试。
• 直接使用相对路径测试：跳过PHP变量传递，在CSS中直接使用相对路径，验证路径是否能被正确解析：

  cursor: url('/img/mark-facsimile.png') 0 0, crosshair !important;
  

• 检查服务器响应头：在浏览器开发者工具的Network面板中查看图片的响应信息，确保服务器返回的Content-Type正确（如image/png），错误的响应头会导致浏览器无法识别图片作为光标使用。

内容的提问来源于stack exchange，提问作者Swim89