link 为图像返回 404，但直接 link 资产加载正常

Question

在我正在构建的网页中，一些图像返回 404 错误，但是直接 link 到图像可以正常加载它们。相同的文件路径。图像的权限是 755，所以这应该不是问题。

我正在 link 内联 css 向他们发送消息，我会解决这个问题，但就像这样：

<div class="swiper-slide" style="background-image: url(t.jpg;" data-year="2012">

和图像 https://irfandesign.com/t.jpg loads fine. the live version of the site can be found at https://irfandesign.com/dev.html

您知道为什么图片无法加载吗？一个是绝对 url unlink 相对 url 这些是。

Answer 1

删除图像名称末尾的 ; t.jpg; 至 t.jpg

Answer 2

如果您仔细查看 URL 寻找的图像 https://.../t.jpg;

Answer 3

您刚刚遇到了一个非常小（但非常混乱）的语法错误。您的浏览器试图通过关闭您忘记关闭的内容来修复它，但它最终会寻找名为 t.jpg;.

的图像

记住 url() 是 CSS 的函数，所以：

selector {
   background: url('..............');
/*  if you open --^                ^---- you must close        */
}

您的 style 属性具有以下值：

background-image: url(t.jpg;
/* it opens ---------^     ^---- but never closes... */

因此，您的智能（但不是那么多）浏览器会尝试为您关闭它，导致它最终成为：

background-image: url(t.jpg;);
/*                          ^---- your browser trying to close it */

您的属性应该是这样的：

body { /* <-- Use your own selector */
  background-image: url('https://irfandesign.com/t.jpg');
  background-size: cover;
}

Ignore background-size property, it's just for visualization.

link returning 404 for images, but the direct link to asset loads fine