Fix missing images issue when serving via Flask

bazarr/app/ui.py

@@ -22,8 +22,14 @@
                   template_folder=os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(__file__))),
                                                'frontend', 'build'),
                   static_folder=os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(__file__))), 'frontend',
-                                             'build', 'static'),
-                  static_url_path=base_url.rstrip('/') + '/static')
+                                             'build', 'assets'),
+                  static_url_path='/assets')
+
+static_bp = Blueprint('images', __name__,
+                     static_folder=os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(__file__))), 'frontend',
+                                             'build', 'images'), static_url_path='/images')
+
+ui_bp.register_blueprint(static_bp)
 
 
 def check_login(actual_method):
@@ -75,22 +81,6 @@ def catch_all(path):
     return render_template("index.html", BAZARR_SERVER_INJECT=inject, baseUrl=template_url)
 
 
-@ui_bp.route('/assets/<path:filename>')
-def web_assets(filename):
-    # forcing mimetypes to prevent bad configuration in Windows registry to prevent Bazarr UI from showing
-    mimetypes.add_type('application/javascript', '.js')
-    mimetypes.add_type('text/css', '.css')
-    mimetypes.add_type('font/woff2', '.woff2')
-    mimetypes.add_type('image/svg+xml', '.svg')
-    mimetypes.add_type('image/png', '.png')
-    mimetypes.add_type('image/x-icon', '.ico')
-
-    # send_from_directory needs an absolute path then we'll use realpath() here
-    path = os.path.realpath(os.path.join(os.path.dirname(os.path.dirname(os.path.dirname(__file__))), 'frontend',
-                                         'build', 'assets'))
-    return send_from_directory(path, filename)
-
-
 @check_login
 @ui_bp.route('/bazarr.log')
 def download_log():

frontend/index.html

@@ -4,7 +4,7 @@
     <title>Bazarr</title>
     <base href="{{baseUrl}}" />
     <meta charset="utf-8" />
-    <link rel="icon" type="image/x-icon" href="./static/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"

frontend/src/App/Header.tsx

@@ -61,7 +61,7 @@ const AppHeader: FunctionComponent = () => {
               <Avatar
                 alt="brand"
                 size={32}
-                src={`${Environment.baseUrl}/static/logo64.png`}
+                src={`${Environment.baseUrl}/images/logo64.png`}
               ></Avatar>
             </Anchor>
           </MediaQuery>

frontend/src/pages/Authentication.tsx

@@ -30,7 +30,7 @@ const Authentication: FunctionComponent = () => {
           <Avatar
             mx="auto"
             size={64}
-            src={`${Environment.baseUrl}/static/logo128.png`}
+            src={`${Environment.baseUrl}/images/logo128.png`}
           ></Avatar>
           <Divider></Divider>
           <form onSubmit={form.onSubmit(login)}>