基于图像是否从外部 URL 加载的 if 语句答案

【问题标题】：If statement based on whether an image loads or not from an external URL基于图像是否从外部 URL 加载的 if 语句
【发布时间】：2017-10-31 13:25:42
【问题描述】：

我很难说出这个问题 - 所以 Stackoverflow 上可能已经有答案 - 但我正在使用一个 API，该 API 提供指向外部 URL 的图像链接以及 JSON 文件中的其他数据。不幸的是，一些链接不再有效。

我的目标是在 if 语句中确定这一点，如果图像没有加载，也不要加载任何其他数据。

这是我尝试过的代码，但不幸的是，有些项目仍然通过：

{% for i in range(cards[setName]|length) %}
    {% if cards[setName][i]['img'] %}
        <p>{{ cards[setName][i]['name'] }}</p>
        <a href="{{ cards[setName][i]['img'] }}">
            <img src="{{ cards[setName][i]['img'] }}">
        </a>
    {% endif %}
{% endfor %}

【问题讨论】：

图片加载不出来可以用JS隐藏数据。如图所示：stackoverflow.com/q/3235913/1925257
@xyres 有最好的解决方案 - 你的代码仍然显示死图像，因为 cards[setName][i]['img'] 不是 null
有处理这个问题的pythonic方法吗？我宁愿不为这一问题深入研究 jQuery。
@Bonteq 我发布了一个不需要 jQuery 的答案，但需要普通的 JS。你只需要为它写一行。

标签： python web flask jinja2

【解决方案1】：

Jinja 不知道链接是否有效。它只是得到一个字符串。因此，您要么在 api 中发送 JSON 之前进行此检查，要么使用 cmets 中建议的 javascript 解决方案来隐藏失败的图像。

在发送 json 之前“仅”进行检查是个坏主意，因为您将打开许多请求来检查每个 url。最好使用异步作业来检查数据库中的图像。

另外，为什么在范围内使用 i？这样做同样可以提高可读性。

{% for card in cards[setName] %}
    {% if card['img'] %}
        <p>{{ card['name'] }}</p>
        <a href="{{ card['img'] }}">
            <img src="{{ card['img'] }}">
        </a>
    {% endif %}
{% endfor %}

【讨论】：

嘿，所以@xyres 的回答最终解决了我提出的问题，但是我挖掘了正在提供的 URL，如果我没有的话，大多数（如果不是全部）“错误”URL 都可以工作更改了最后几个字符。这是否可以在调用 API 期间进行更改？如果您愿意的话，我很乐意发布一个新帖子。
你为什么使用这种网址？更改“最后几个字符”是一个相当广泛的范围。可能意味着将“.png”更改为“.jpeg”或类似的扩展名更改。或者 .. 当使用类似“tinyurl”的 url 时，一个完全不同的 url。更多信息会很有用。
当然。例如，此 URL 显示为 wow.zamimg.com/images/hearthstone/cards/enus/original/…，但是，如果我保留前 7 个字符并删除它们与 .png 之间的所有内容，则图片会正确显示。所以不是上面的网址，而是wow.zamimg.com/images/hearthstone/cards/enus/original/…
如果您删除的始终是同一个“_H1”，您可以考虑按照jinja docs 使用|replace。否则在 jinja 中很难做到这一点。因为默认情况下无法拆分（可能是扩展？）。
它并不总是'_H1'，但它总是在最后一个反冲后的前 7 个字符之后。即：'URL'/CFM_111.png 而不是 'URL'/CFM_111_xx.png 所以我可能有 'URL'/CFM_111_xx_xxx.png 但我只需要前 7 个字符（CFM_111）和 .png 扩展名。感谢您提供 jinja 文档链接，我会检查一下，看看是否能找到一些有创意的东西。

【解决方案2】：

这是一个最小的例子。根据您的需要对其进行修改。它所做的只是在图像未加载时隐藏 img 的父 div。

<div> <!-- this div contains the image and other data -->

    <img src="path/to/image.jpg" onError="this.onerror = '';this.parentElement.style.display='none';">

    <!-- ... other data ... -->
</div>

如果 div 是 img 的祖父母，而不是父母，要访问它，请使用：

this.parentElement.parentElement

【讨论】：