Laravel中使用Ajax时Sweet Alert无法显示图片求助

嘿，我来帮你搞定这个问题！从你的描述和代码来看，主要有几个可能的原因，咱们一步步排查：

1. 先搞定Laravel的CSRF令牌验证（核心坑点） #

虽然你用的是GET请求，但Laravel的安全机制对请求有严格限制，而且删除操作其实用DELETE请求更符合RESTful规范也更安全。不管怎样，确保Ajax请求携带CSRF令牌是必要的：

• 先在页面头部添加meta标签，用来存储CSRF令牌：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 然后在Ajax请求里设置请求头，带上令牌：

  $.ajax({
    url: linkURL,
    type: 'DELETE', // 建议改成DELETE，记得路由也要对应调整成Route::delete()
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(result){
      swal("The team was deleted!");
    },
    error: function(xhr){
      // 新增错误回调，能帮你快速看到请求哪里出问题了
      swal("Oops!", "请求出错了：" + xhr.responseText, "error");
    }
  });
  

如果暂时不想改请求类型，也一定要确认你的GET路由没有被CSRF中间件拦截。

2. 检查icons变量的图片路径是否正确 #

你代码里的icon: icons，这个变量的路径大概率是问题根源：

• 如果是本地图片，必须用Laravel的asset()函数生成绝对路径，避免Ajax请求上下文导致路径解析错误：

  // 在blade模板里定义全局变量，或者直接写在JS代码里
  const icons = "{{ asset('path/to/your/loading-image.gif') }}";
  

  这样生成的是完整的绝对URL，和外部网站图片的访问逻辑一致，就不会出现加载失败的情况了。

3. 给Ajax加错误回调，排查隐藏问题 #

你的代码里只有success回调，没有处理请求失败的情况——可能请求早就报错了，但你没发现。加上error回调后，能直接看到错误信息（比如419状态码就是CSRF令牌验证失败），帮你快速定位问题。

最后测试：直接写绝对路径验证 #

可以先把第二个SweetAlert的图片路径改成绝对路径测试，确认图片本身没问题：

swal({
  title: "Checking...",
  text: "Please wait",
  icon: "{{ asset('images/loading.gif') }}", // 这里替换成你实际的图片路径
  button: false,
  allowOutsideClick: false
});

按照上面的步骤调整后，应该就能解决问题了！

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