Firefox 的图像加载失败，但在 Chrome、Edge 和 IE 上运行良好答案

【问题标题】：Image loading fails for Firefox but runs fine for Chrome, Edge and IEFirefox 的图像加载失败，但在 Chrome、Edge 和 IE 上运行良好
【发布时间】：2018-02-04 15:10:40
【问题描述】：

编辑：在 IE 上测试，它可以工作！

编辑2：通过将HTML转储放入一个html文件并加载它来测试它，它可以工作！这有点可疑，如果我通过 Django 应用程序和 Firefox 加载它为什么加载不出来

编辑3：我想知道它是否与本地主机（127.0.0.1:8000）有关，但不应该是这样！

编辑 4：重新安装 Firefox 后，它可以工作了………………该死的！

我编写了一个 django 应用程序，它可以获取 Twitter 帐户的信息并在网页上显示其个人资料图片。在执行此操作时，我注意到每当我加载存在图像的页面时，Firefox 都不会加载图像（图像在 Chrome 和 Edge 上完美加载），它甚至似乎都没有尝试（因为没有登录页面检查器的网络标签）。

我通过在新的 html 文件中放置一个简单的<img src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg"> 标签并在我系统上的所有浏览器上运行它来检查它是否是 Twitter 阻止人们在其他网站上加载他们的东西。结果很好，所有浏览器都能正确显示图片。

我通过运行应用程序并加载页面再次对其进行了测试，但它没有在 Firefox 上加载图像（在 Chrome 和 Edge 上完美加载）但是当我将 src url 替换为 imgur 上另一个图像的 url它在 Firefox 上正确显示（在 Chrome 和 Edge 上完美加载）。我还尝试使用来自另一个配置文件的图像，但在 Firefox 上也失败了。

似乎只有来自 Twitter 并通过 Firefox 上的 DJango 应用程序加载图像才能加载（其他 2 个浏览器 Edge 和 Chrome 可以完美加载图像）。

我尝试使用隐身模式（以防我使用的扩展程序之一干扰），结果相同，加载失败。

然后我检查了 url 是否格式不正确并且不是。

有人知道为什么图像在除 Firefox 之外的其他浏览器上完美加载吗？

这里的故障排除是我的views.py

def load_dashboard(request):
    template_name = 'twitter/dashboard.html'
    context = dict()

    if request.user.is_authenticated:
        bot_list = TwitterBot.objects.filter(creator=request.user.id)

        if bot_list:
            bot_data = list()
            for bot in bot_list:
                user_info = get_user_info(bot)

                # Change profile_image_url to get original resolution image.
                user_info['profile_image_url'] = user_info['profile_image_url'].replace("_normal", "")
                user_info['profile_image_url_https'] = user_info['profile_image_url_https'].replace("_normal", "")

                bot_data.append(user_info)

            context['bot_data'] = grouped(bot_data, 4)
        else:
            context['error'] = 'No bot found. Please add a bot.'
    else:
        context['error'] = 'You are not authenticated. Please login or register!'

    return render(request, template_name, context)

这是我的模板：

{% extends 'base/base.html' %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            {% if error %}
                <div class="alert alert-danger">
                    <strong>Error! </strong> {{ error }}
                </div>
            {% endif %}

            <ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">    
                    {% if not error %}
                        {% for group in bot_data %}
                            <div class="row">
                                {% for bot in group  %}
                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="{{ bot.profile_image_url_https }}">
                                            <div class="card-body">
                                                <h5 class="card-title">@{{ bot.screen_name }}</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

这里是 Firefox 浏览器检查工具转储：

    <html><head>
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/stylesheets/screen.css">
    </head>

    <body>
        <header>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container">
                    <a class="navbar-brand" href="#"></a>

                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Pricing</a>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="dashboard_drop" data-toggle="dropdown">
                                    Dashboards
                                </a>

                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="/twitter/dashboard">Twitter</a>
                                    <a class="dropdown-item" href="#">Instagram</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <main>

<div class="container">
    <div class="row">
        <div class="col-sm-12">


            <ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">    


                            <div class="row">

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                            </div>


                </div>
            </div>
        </div>
    </div>
</div>

        </main>

        <footer>

        </footer>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



</body></html>

这是 Chrome 检查工具转储：

<html><head>
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/stylesheets/screen.css">
    <style></style></head>

    <body>
        <header>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <div class="container">
                    <a class="navbar-brand" href="#"></a>

                    <!-- Toggler/collapsibe Button -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#"></a>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="dashboard_drop" data-toggle="dropdown">
                                    Dashboards
                                </a>

                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="/twitter/dashboard">Twitter</a>
                                    <a class="dropdown-item" href="#"></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <main>

<div class="container">
    <div class="row">
        <div class="col-sm-12">


            <ul class="nav nav-tabs" id="dashboard_tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="your_bot_tab" data-toggle="tab" href="#your_bots" role="tab" aria-controls="your_bots" aria-selected="true">Your Bots</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="your_bots" role="tabpanel" aria-labelledby="your_bot_tab">    


                            <div class="row">

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="card">
                                            <img class="card-img-top" src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">
                                            <div class="card-body">
                                                <h5 class="card-title">@twitter_handle</h5>
                                                <a href="#" class="btn btn-primary float-right">Bot Dashboard</a>
                                            </div>
                                        </div>
                                    </div>

                            </div>


                </div>
            </div>
        </div>
    </div>
</div>

        </main>

        <footer>

        </footer>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



</body></html>

我通过差异检查器运行了 HTML 转储，在 Firefox 上唯一的区别只有 </header> 存在，而在 chrome 上它是这个 <style></style></head>

【问题讨论】：

标签： javascript css django html

【解决方案1】：

首先您应该清除 cookie 和缓存，或将 Mozilla 设置重置为默认值。如果仍然无法正常工作，请重新安装 Mozilla Firefox。

【讨论】：

重新安装，成功了。不知道到底是什么问题

【解决方案2】：

通过重新安装 Firefox，现在可以加载图像。请不要像我一样傻。

【讨论】：