I developed a group chat program using Python microframework flask, vanilla JavaScript, and Flask-SocketIO. The program is deployed on heroku and can be accessed here: .
After deployment, I encountered the following issue:
While the program worked fine on my local machine before deployment, upon accessing the website, the background image is
not displaying at all, or
only showing a portion of it, or
flickering and disappearing completely
I have attempted to optimize the image size, but the problem persists.
The structure of the project directory is as follows:
static
│ ├── css
│ │ ├── index.css (styles for the main page)
│ │ ├── channel.css (styles for the channel page)
│ │ ├── bootstrap.min.css
│ │ └── all.css
│ ├── images
│ │ ├── aircraft.jpeg
│ │ ├── ....
│ ├── js
│ │ ├── index.js (JavaScript for the main page)
│ │ ├── channel.js (JavaScript for the channel page)
│ │ ├── bootstrap.bundle.min.js
│ │ ├── jquery-3.3.1.slim.min.js
│ │ └── socket.io.js
│ ├── music
│ └── GrandmaSaid.mp3
└── templates
├── base.html
├── channel.html (HTML for the channel page)
└── index.html (HTML for the main page, extending from base.html)
Any help or suggestions would be greatly appreciated! Thank you in advance!!!