I am displaying static .jpg/.png images on my dash app locally and they show up fine. Even a logo in the header of the app in the browser.They simply are not being found at all after deployment. the rest of the app runs fine. you can see this by going to http://foodmoodai.appspot.com and login with user 'test' and password 'test1'.I have tried all the suggestions here on SO and online - which almost almost involve change to the app.yaml file - enabling static images by including various commands for the '-handlers' section. None of these have changed the error for me.you can see my app.yaml below.
As stated I have tried many combinations of advice for the app.yaml file such as,
#handlers:
- url: /imgages
static_dir: imgages
- url: /.*
script: app.app
my latest app.yaml file,
runtime: python
env: flex
entrypoint: gunicorn app:app.server -b :$PORT
threadsafe: true
manual_scaling:
instances: 1
runtime_config:
python_version: 3.7
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
handlers:
# This configures Google App Engine to serve the files in the app's static
# directory.
- url: /static
static_dir: static/
# This handler routes all requests not caught above to your main app. It is
# required when static routes are defined, but can be omitted (along with
# the entire handlers section) when there are no static files defined.
- url: /.*
script: auto
#handlers:
- url: /imgages
static_dir: imgages
- url: /.*
script: app.app
the start of my main 'app.py' file,
# index page
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import sys
#sys.path.append('/Users/crowledj/Mindfule/dash-flask-login/views/')
#sys.path.append('/Users/crowledj/Mindfule/dash-flask-login/flask_login/')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__ , external_stylesheets=external_stylesheets)
server=app.server
app.css.append_css({'external_url': 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'})
from server import app, server
from flask_login import logout_user, current_user
import success, login, login_fd, logout
#import sqlalchemy
header = html.Div(
className='header',
children=html.Div(
className='container-width',
style={'height': '100%'},
children=[
html.Img(
src='mindfule_company_logo.jpg',
className='logo'
),
html.Div(className='links', children=[
html.Div(id='user-name', className='link'),
html.Div(id='logout', className='link')
])
]
)
)
important section from the 'success.py' file (called on successful login),
import dash
#import dash_auth
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
from textwrap import dedent as d
from flask import Flask
import pandas as pd
import numpy as np
from NutrientParser import parseNutrientStr_frmUser,parseResearch,parseFoodResearch,find_substring
from userMindfuleClasses import *
import PIL
import urllib3
from PIL import Image
import json,os
import arrow
from server import app
from flask_login import current_user
import psycopg2
from datetime import datetime
from sqlalchemy import Table, Column, Integer, String, MetaData,create_engine
meta = MetaData()
#engine = create_engine('postgresql+psycopg2://postgres:Pollgorm1@/cloudsql/foodmoodai:europe-west2:foodnmood-db')
engine = create_engine('postgresql+psycopg2://postgres:Pollgorm1@/?host=/cloudsql/foodmoodai:europe-west2:foodnmood-db')
mealnMoodwithTimesnFoods = Table(
'mealnMoodwithTimesnFoods', meta,
Column('time', String, primary_key = True),
Column('id', String),
Column('food_1', String),
Column('food_2', String),
Column('food_3', String),
Column('mood', String),
)
meta.create_all(engine)
researchDict=pd.read_csv('./researchFindings2.csv')
food_perNutrient=pd.read_csv('./foods_perNutrientSheet - Sheet1.csv')
#prepare a .csv to use as the table
f_ptr= open("./nutrientRdas.csv","w")
f_ptr.write("Vitamin A,Vitamin B-6,Vitamin C,Vitamin D,Iron,Zinc,Magnesium,Vitamin B-12,Folic acid,Glucose,EPA\n")
f_ptr.close()
#user_1=User()
colors = {
'logo_font' : '#797d7f',
'logo_background' : ' #f2f3f4',
'submit_button_font' : '#fbfcfc',
'blue' : '#4530CA'
}
layout = html.Div([
html.Div(children = [
dcc.Input(
id = 'meal_input',
placeholder = 'Start typing...',
value='',
style={
'textAlign': 'left',
'font-weight' : 'bold',
and the section with a static image attempted too be loaded ,
html.Div(className = 'row1', children =[
html.Div([ #opening brackets for Food Images DIV
html.P('Lunch', style = {'font-weight' : 'normal', 'color': '#212122', 'font-size' : '15px', 'padding-left': 10, 'padding-top' : 5}),
html.Div([
html.Div([
html.Img(
id='meal_image1',
src = 'apple.jpg',
#food_NutritionixOutputDict1 = parseNutrientStr_frmUser("apple",'2147b24b','aa03660c9838d2a7669b7981d8854604',True,False,False,'000000001',2017),
#src=food_NutritionixOutputDict1['orig_food_struct']['foods'][0]['photo']['thumb'] ,
style={
'height' : '50px',
'width' : '50px',
'position' : 'absolute',
'top' : 60,
'left' : 30,
})
]),
html.Div([
html.P('Apple',
id='meal_p1',
style = {
I expect the images to be found on the browser @ run of deployed cloud app. And for them to show on there browser session @ login. Instead these show up as image not found icons.
There are several javascript errors that can be seen in the inspect element in the browser after login.
