Question

我正在设计一个列表网站，其中每个用户可以上传多个图像（＆lt; 10），并且它们存储在服务器上的文件中。当UI向后端发送AJAX请求时，我没有在JSON响应中发送任何图像信息。而是我从用户ID本身派生图像路径。原因是，不希望在DB（MySQL）中存储图像信息/路径的开销，以便更快地进行数据库搜索。所以我使用以下内容显示图像：

<img src="..." onError="defaultImage(this);" />
function defaultImage(source) {
    source.src = 'blank.png';
    source.onerror = null; 
    return false;
}

到目前为止一切顺利。但问题是，当我查看浏览器控制台时，它正在打印

获取网址[HTTP / 1.1 404未找到5毫秒]

我每个AJAX请求发送20个用户/列表，并且在滚动时自动加载列表，因此整个控制台充满了这些错误。现在我的问题是，是否可以出现这些错误，或者我应该将图像路径信息存储在DB中，而只显示具有有效路径的图像。我唯一担心的是添加一个额外的列来存储图像信息可能会对SQL查询产生性能影响，所以我尝试在主表中存储尽可能少的列/信息（作为列表的索引）以使搜索成为尽可能快。或者，有没有办法从浏览器控制台隐藏这些错误？

Answer 1

使用此字符串作为图像的源URL以避免对服务器的请求（以及404错误响应）

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Answer 2

将路径（而不是图像本身）存储在数据库中是一种很好的方法。

我真的不知道你当前是如何存储图像的，但这样的表会有意义：

+---------+---------+-------------+---------------+
|image_id | user_id |  image_path | date_uploaded |
+-------------------------------------------------+
| 1       | 1       | /img/xxx.png|  31|07|2016   |
| 2       | 1       | /img/yyy.png|  31|07|2016   |
| 3       | 5       | /img/zzz.png|  31|07|2016   |
+---------+---------+-----------------------------+

当他尝试上传新图像时，您必须手动检查用户的图像少于10张。

然后，当您想要检索用户的所有图像时，您可以对后端进行ajax调用，后端将运行查询，如

SELECT image_path FROM images
JOIN users ON users.user_id = images.user_id

希望有所帮助：）

Answer 3

不是默认设置src并使用OnError来使用函数生成默认图像路径，而是应该为任何没有src属性的img标记添加一些默认css。然后对实际无法加载的图像保留OnError。这最终将请求的总量减少到最低限度。

img:not([src]) { // Default Image CSS }

使用<img src="" onerror=""/>在MySQL和HTTP GET中存储图像路径

3 个答案: