Edit : Tested on IE and it works!
Edit 2 : Tried loading the HTML dump directly in a html file, and it worked! This is strange, why won't it load when loaded through the Django app in Firefox?
Edit 3 : Could it be related to localhost (127.0.0.1:8000)? But that shouldn't be the issue!
Edit 4 : After re-installing Firefox, it finally works... darn it!
I developed a Django app that fetches information from a Twitter account and displays its profile image on a web page. I noticed that when I try to load the page with the image on Firefox, the image doesn't load (even though it loads perfectly fine on Chrome and Edge), and there's no log entry in the network tab of the inspector.
To check if Twitter is blocking content from being loaded on other sites, I created a simple
<img src="https://pbs.twimg.com/profile_images/953783329093967872/Dn_-PaQA.jpg">However, when I tried loading the same image through the Django app on Firefox, it failed to load (but loaded without issues on Chrome and Edge). When using a different image URL from Imgur, it displayed properly on Firefox as well. Also, when attempting to use an image from another Twitter profile, it failed on Firefox.
It appears that images can only not be loaded if they are from Twitter and accessed through the Django app in Firefox (Chrome and Edge load them just fine).
I even tried using incognito mode to rule out any extension interference, but the result was the same - failure to load the image.
I confirmed that the image URLs are not malformed in any way.
Does anyone know why the image loads on all other browsers except Firefox?
For troubleshooting purposes, here is a snippet from my views.py:
def load_dashboard(request):
template_name = 'twitter/dashboard.html'
context = dict()
# Authentication logic here...
return render(request, template_name, context)
Here is a snippet from my template:
{% extends 'base/base.html' %}
{% block content %}
<div class="container">
<!-- Content structure here -->
</div>
{% endblock %}
Firefox browser inspect tool output:
<!-- Firefox inspect tool data here -->
Chrome inspect tool output:
<!-- Chrome inspect tool data here -->
I compared the HTML dumps using a difference checker, and the only discrepancy I found was the presence of </header> in Firefox and
<style></style></head>