Question posted in 
Edit : Tested on IE and it works!
Edit 2 : Tested it by putting the HTML dump into a html file and loading it, it works! This is kind fishy, why doesn’t it load if I load it through the Django app and Firefox
Edit 3 : I wonder if it has something to do with local host (127.0.0.1:8000) but that shouldn’t be it!
Edit 4 : After reinstalling Firefox, it works … …. …. damn it!
I wrote a django app that gets the info of a Twitter account and display it’s profile image on a web page. While doing this I noticed that whenever I load the page where the image is present, Firefox does not load the image (the image loads perfectly on Chrome and Edge), it doesn’t even seem to try (as there is no log in the network tab of page inspector).
I tested it to check if it’s Twitter who is blocking people from loading their stuff in other sites by putting a simple <img src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg"> tag in a new html file and run it across all browser on my system. The result is good, all browsers display the image correctly.
I tested it again by running the app and load the page but it doesn’t load the image on Firefox (loads perfectly on Chrome and Edge) but when I replace the src url with a url of another image on imgur and it displays it properly on Firefox (loads perfectly on Chrome and Edge). I also tried it using an image from another profile and that failed as well on Firefox.
It seems that the image can’t be loaded only if it is from Twitter and loaded through the DJango app on Firefox (The 2 other browsers , Edge and Chrome, loads the image perfectly).
I tried using incognito (in case one of the extensions I use is interfering) and the result is the same, it failed to load.
I then checked if the url is malformed in anyway and it is not.
Do anybody know why the image loads perfectly on other browsers but Firefox?
For trouble shooting here is my 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)
Here is my template :
{% 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 %}
Here is the Firefox browser inspect tool dump :
<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>
Here is the Chrome inspect tool dump :
<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>
I ran the HTML dumps through a difference checker and the only difference on Firefox only </header> is present while on chrome its this <style></style></head>
2
Answers
By reinstalling Firefox, the image now loads. Please don’t be dumb like me.
First you should clear cookies and cache, or reset Mozilla settings to default. If it is still not working, reinstall Mozilla Firefox.