Local Django Static not loading how say should in Docs

[alexwolf22]

I've been trying for a while to load a static image asset in my App, using the Django static file infrastructure, but the recommended way to load a static as described here doesn't seem to be working.

I have an Img tag like below

import dash_html_components as html

html.Img(src='web/logos/bluewhite-02.png', height="30px")

but each time I run the appliaction the image tries to get the url at http://127.0.0.1:8000/web/logos/bluewhite-02.png when it should be /static/web/logos/bluewhite-02.png

I've tried setting the global PLOTY_DASH var serve_locally in my settings to True and False but it doesn't seem to make a difference.

I have been able to get it to load by directly entering the static URL for the image HTML component, but it isn't the way it says it should be done in your documentation.

import dash_html_components as html

html.Img(src='/static/web/logos/bluewhite-02.png', height="30px")

[GibbsConsulting]

That is strange. A couple of questions about your configuration:

• are other static files being served correctly?
• what values do you have for STATIC_URL STATIC_ROOT and STATICFILES_DIRS in your settings.py file?
• do you get the same result if you move the file into the assets dir?

For the last of these, you could also try to use <your_django_dash_app_instance>.get_local_url(asset_path) as well.

[alexwolf22]

Hi there, thanks for getting back to me.

The settings values for the following requested are

• STATIC_URL = '/static/'
• STATIC_ROOT = os.path.join(BASE_DIR, 'static')
• STATICFILES_DIRS = []
  • don't have this value set in settings
  • default for Django 3.0 is []

The image being added is located in the path below, where web is a Django app in my project. web/static/web/logos/bluewhite-02.png

I am running into this problem in local development, and Django is able to find the properly asset in templates, when I use the Djano template tag through the 'django.contrib.staticfiles.finders.AppDirectoriesFinder' STATICFILES_FINDER.

{% static 'web/logos/bluewhite-02.png' %}

Also I'm using Django Plotly dash version 1.3.1.

What is the assets directory you're talking about?

MY Intilaited Django app doesn't seem to have a method app.app.get_local_url() either.

[GibbsConsulting]

@alexwolf22 can you put the image in the same directory as the app code, or a subdirectory - assets is the conventional name for dash apps. Then run collectstatic and reference the image using a path relative to the app code.

[alexwolf22]

So I add the directory dash_app/assests and add the image bluewhite-02.png in that directory.

Also changed my Django setting STATICFILES_DIRS to ["dash_app/assets"] to account for that directory when running collectstatic.

The Image now is in my static_files dir, but it tried multiple URLs paths for the img src in the photo below and couldn't get it to load. Maybe I still have things set up wrong?

Using the URL I originally had /static/web/logos/bluewhite-02.png works fine for my use case.

I need to be able to reference static assets from other Django apps, not within my Dash module, similar to how you can reference any static assets in Django Templates.

May be worth adding to the documentation that you can reference any static resource with /static/ or edit the code somehow to be able to find assets in other Django apps.

Also on a side note also, referencing the image from another Django app the way I have it works fine without running collect static if DEGUG=True in the settings.

[GibbsConsulting]

@alexwolf22 if you want to share assets, then the best thing to do is to handle them using Django's static file technology. You do need to ensure it is set up correctly. Then your css will be available wherever you have placed it in the static hierarchy. django-plotly-dash can do some of the work for you, but you still need to set up your Django static file handling correctly.