Импортировать изображение из json в компонент реакции

Question

Надеюсь, у тебя все хорошо. Я пытаюсь заставить компоненты Dynami c реагировать с помощью JSON. Я смог успешно добавить данные в мои компоненты, но когда дело доходит до изображений, они не загружаются. Я помещаю свои изображения в папку publi c (public / img / *). Вот мой код для того же компонента

{
                    roles.map(role =>(
                        <div className="col-md-12" style={{padding:'10px'}}>
                        <div className="row">
                        <div className="col flex all-center">
                            <img src="{role.photo}" alt="Venue" style={img} />
                        </div>
                        <div className="col flex all-center">
                            <h3 className="paragraph">{role.name}</h3>

                        </div>
                        <div className="col flex all-center">
                            <p className="paragraph" style={marginBottom}>{role.username}</p>
                        </div>
                        <div className="col flex all-center">
                            <p className="paragraph" style={marginBottom}>{role.email}</p>
                        </div>

                         <div className="col flex all-center">
                         <p className="paragraph" style={marginBottom}>{role.phone}</p>

                         </div>
                         <div className="col flex all-center">
                         <div className="custom-control custom-checkbox">
                           <input type="checkbox" className="custom-control-input" checked={role.block} id="block-admin-one" name="block-admin-one" />
                           <label className="custom-control-label" for="block-admin-one"></label>
                         </div>
                         </div>
                         <div className="col flex all-center">
                             <i className="fa fa-trash fz-20"></i>
                         </div>
                         <div className="col flex all-center">
                         <button type="button" name="update-profile" className="golden-button-sm">Update</button>

                         </div>
                         </div>
                    </div>

                    ))
                }

JSON образец файла

[
    {
        "photo":"img/user-image.jpg",
        "name":"Pranay Kumar",
        "username":"pranay",
        "email":"pranay.kumar@gmail.com",
        "phone":"909304004",
        "block":false
    }
]

Структура папки (Компонент)

роль-управление

• RoleList. js (компонент списка)
• RoleData. json (JSON файл)

Структура папки (Publi c)

• public
  • / img / user-image.jpg

Answer 1

используйте require(role.photo) и удалите ""(double quotes) после src=.

Напишите src={require(role.photo)} вместо src="{role.photo}"

{
                    roles.map(role =>(
                        <div className="col-md-12" style={{padding:'10px'}}>
                        <div className="row">
                        <div className="col flex all-center">
                            <img src={require(role.photo)} alt="Venue" style={img} />
                        </div>
                        <div className="col flex all-center">
                            <h3 className="paragraph">{role.name}</h3>

                        </div>
                        <div className="col flex all-center">
                            <p className="paragraph" style={marginBottom}>{role.username}</p>
                        </div>
                        <div className="col flex all-center">
                            <p className="paragraph" style={marginBottom}>{role.email}</p>
                        </div>

                         <div className="col flex all-center">
                         <p className="paragraph" style={marginBottom}>{role.phone}</p>

                         </div>
                         <div className="col flex all-center">
                         <div className="custom-control custom-checkbox">
                           <input type="checkbox" className="custom-control-input" checked={role.block} id="block-admin-one" name="block-admin-one" />
                           <label className="custom-control-label" for="block-admin-one"></label>
                         </div>
                         </div>
                         <div className="col flex all-center">
                             <i className="fa fa-trash fz-20"></i>
                         </div>
                         <div className="col flex all-center">
                         <button type="button" name="update-profile" className="golden-button-sm">Update</button>

                         </div>
                         </div>
                    </div>

                    ))
                }

Я думаю, это будет полезно для вас.