is there a way to load static file like png or ttf in a custom dash component plugin package?

I'm writting my own dash components on top of dash & react-semantic-ui.
just find that it's hard to use the icon in dash, cause most react lib pack png files(and many others like ttf) for the icon.

Hm good question. Does the solution in #71 work for you?

Er, it wouldn't really if you're writing your own bundle. The Dash component bundles only include CSS and JS bundles (see e.g. https://github.com/plotly/dash-core-components/blob/master/dash_core_components/__init__.py#L15-L43).

We could also include a way to specify the image assets of the bundle / package as well.

yep, i've find that there are only two kinds of dist config(js and css) which makes hard to write components like icon on top of other react library.
for now , I'm writting my own components using react-semantic-ui, for the icon part, I have to use icons in awesome font(just include the awesome css and put the fa-xxx in the class).

@chriddyp

@chriddyp are there any plans to look into this? would you accept a PR that implements it? i need to serve map files for my components and an assortment of static resources such as fonts and icons.

@yunake

@yunake - I'm not planning on looking into this in the immediate future. I would accept a PR that would add this. This will likely be added to the https://github.com/plotly/dash-components-archetype repository. If possible, a little write up (in a github issue) on the general approach of how this would be accomplished would be really helpful for me and others before the PR gets submitted.

Great!
I was thinking of creating a mechanism similar to _css_dist/Resources(), but special-cased for directories. For the sake of clean user interface, I think it would be preferable to have user specify his static artefact directory in his __init__.py, and have us hook it into flask.send_from_directory, under a component-specific url just like current resources. The downside is that the client code now needs to know the component name to figure out which URIs to generate to reach the resources, but I think this is a reasonable requirement, since these components would be tied to Dash anyway. What do you think?
I have no idea when I will work on this, for now I have a work-around with a custom flask route that handles everything for me, but as we expand our collection of modules, we certainly want to establish clear relationships between the resources.

actually, since packages can be egg files and even pex, send_from_directory won't cut it - something like this might be more appropriate, with a pregenerated set of files+urls (for security) - this is what i currently use in my workaround:

from pkg_resources import resource_stream
flask.send_file(
        resource_stream(component_name, os.path.join(static_dir, resource_url)),
        attachment_filename=os.path.basename(resource_url)
    )

I'm also hitting the need for something like this. I want to add static files to a component, in this case I want to add a JS file to dash_renderer that's not to be loaded via index every time.

generate html after template change (plotly#97)

Merge pull request plotly#96 from plotly/improve-build

generate html after template change (plotly#97)

Also hitting this issue when trying to add an icon to a search box. Since it's a component library which is only used internally by one project, I can work around it by duplicating the icon in the project's assets folder, but that's really an ugly workaround and also not feasible for everyone I think.

Merge pull request #96 from plotly/improve-build

generate html after template change (#97)

@gvwilson

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson

Navigation Menu

Repository navigation

is there a way to load static file like png or ttf in a custom dash component plugin package? #96

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

is there a way to load static file like png or ttf in a custom dash component plugin package? #96

Description

Activity

chriddyp commented on Jul 24, 2017

chriddyp commented on Jul 24, 2017

pingf commented on Jul 25, 2017

yunake commented on Aug 16, 2017

chriddyp commented on Aug 16, 2017

yunake commented on Aug 17, 2017

yunake commented on Aug 17, 2017

nicolaskruchten commented on Nov 29, 2018

zeusttu commented on May 28, 2021

gvwilson commented on Jun 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions