Carousel problem - Image doesn't appear

Dash Python
1 
# Import Library
import dash
from dash import Dash
from dash import dcc
from dash import html, dash_table
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from dash import callback, ctx, State
import json

import plotly.express as px 

import plotly.graph_objects as go
import librosa
import librosa.display


import matplotlib
import matplotlib.axes
from matplotlib import pyplot as plt
import numpy as np
import pandas as pd
import os

import io
import base64
 #--------------------------------------------UI--------------------------------------------
app.layout = html.Div(children=[
    
    #### ----ROW1----
    dbc.Row([
        #### ----ROW1-COL1----
        
        dbc.Col(html.Div([navbar]))
    ]),html.Br(),

    
    dbc.Row([
         
         dbc.Col([
             dbc.Carousel(
                 items=[
                     {"key": "1", "src": "/asset/process.jpg"},
                     {"key": "2", "src": "/asset/process.jpg"},
                     {"key": "3", "src": "/asset/process.jpg"},
                 ],
                 controls=True,
                 indicators=True,
             )
         ])
     ])

])

dash 2.6.2
dash-auth 1.4.1
dash-bootstrap-components 1.4.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-renderer 1.9.1
dash-table 5.0.0

The problem is the image doesn’t appear. Do you have any solutions?

2

HI @ELITSZORD welcome to the forums.

It might be that you cactually can’t just specify the path to your local files as you did. Try using PIL.Image objects. Here’s how to do that:

2 Likes
3

Hi @ELITSZORD
I’ve faced the exact same problem with images and I don’t know why but when I use this:

src=app.get_asset_url("process.jpg")

It works for me.

4

Thank you @AIMPED for your fast response and it works well. In dbc.Carousel can we use 1 key for multiple images that we want to be uploaded? I want to upload multiple images but still confusing.

image_directory = './asset/'
#image_files = ["process.jpg","glass.jpg","glass1.jpg"]
image_files = ["process.jpg"]
data = []
for image_file in image_files:
    #file_path = image_directory + image_file
    #img = Image.open(file_path)
    img = Image.open(os.path.join(image_directory, image_file))
    data.append(img)
    
app.layout = html.Div(children=[
dbc.Col([
            dbc.Carousel(
                items=[
                    {"key": "1", "src": data}
                    # ,
                    # {"key": "2", "src": data},
                    # {"key": "3", "src": data}
                ],
                controls=True,
                indicators=True,
            )
        ])
])
5

Hi,

you could just use a list comprehension for that:

                items=[
                    {"key": f"{idx}", "src": data}
                    for idx, img in enumerate(data, start=1)
                ],