为什么动画 gif 链接在 xampp 上的 laravel 项目上被破坏？答案

【问题标题】：why animated gif link is broken on laravel project on xampp?为什么动画 gif 链接在 xampp 上的 laravel 项目上被破坏？
【发布时间】：2021-04-22 12:49:18
【问题描述】：

我在 laravel 项目中嵌入了来自 imgur 的 gif 图像。虽然任何外部 jpeg、png 链接都完美地显示在刀片上，但每当我用 gif 替换时，它就会损坏。我正在使用 xampp 本地服务器。 代码 sn-p

<div class="card mb-3">
  <img src="https://i.imgur.com/juuaqEg.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
  <div class="card-body">
    <h5 class="card-title">List of Students</h5>
    <p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
  </div>
</div>

我用静态 jpeg/png 图像链接替换了 imgur 链接，渲染没有问题。 Laravel 不允许来自外部链接的动画 gif 吗？

【问题讨论】：

检查您的浏览器是否阻止了请求。您可以从“检查元素”菜单中检查，然后在网络选项卡中进行检查
Laravel 是一个后端框架。这意味着 Laravel 不可能阻止请求
请右键单击损坏的图像以查看显示的错误和/或右键单击“在新选项卡中打开图像”另外请检查该页面的 html 代码。我刚刚在我的电脑上打开了图片，所以它也应该在你的电脑上打开；-)。

标签： php laravel laravel-blade animated-gif

【解决方案1】：

试试这个：

<div class="card mb-3">
  <img src="{{ URL::asset('https://i.imgur.com/juuaqEg.gif') }}" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">
  <div class="card-body">
    <h5 class="card-title">List of Students</h5>
    <p class="card-text">This is a comprehensive panel for student management. Click buttons to make changes.</p>
  </div>
</div>

其他尝试下载（您的项目的）公用文件夹中的 gif 并调用

<img src="./nameOfTheFile.gif" alt="Imgur" class="card-img-top" style="width:100%;height: 30vw; object-fit:cover; " alt="...">

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习