How to set image path when a component receives a dynamic id from another in reactjs?

Question

I am writing a image slider for my project.In there, the image will not get when I post a dynamic id with Link tag.I save the image path in 'assests/images/'.Why not show the image?Please, advice me.My code is here. This is link component.

<div>
    <switch>
        <Header />
        <TourPackageDetail data={this.props.match.params.id} />
        <Footer />
    </switch>    
</div>

This is the getting json api and setting the image path.

componentWillMount() {
    var id=this.props.data;
    return fetch('http://192.168.1.119:8080/api/viewOneTourPackage/'+id)
        .then(response =>
            response.json()
        )
        .then(responseJson => {
            this.setState({
                package: responseJson,
                picture: responseJson.picture
            });
            console.log(this.state.package);
        })
        .catch((error) => {
            console.log(error)
        });
    }
render() {
    return (
        <div class="carousel-inner" role="listbox">
            {
                this.state.picture.map((getIndex, i) =>
                    i === 0 ?
                    (
                        <div class="item active">
                            <img src={this.props.getIndex} alt={i} style={{ width: "100%", height: "auto" }} />
                        </div>
                    ):
                    (
                        <div class="item">
                            <img src={this.props.getIndex} alt={i} style={{ width: "100%", height: "auto" }} />
                        </div>
                    )
                )
            }
        </div>
    )
}

check this https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs/45334965#45334965 — Shubham Khatri, Nov 09 '17 at 08:51

score 1 · Answer 1 · answered Nov 09 '17 at 07:34

1

I guess this part of the code has the problem. You are accessing the iterated map Value through props. Can you try with this

`

{
this.state.picture.map((pictureSrc, i) =>
i === 0 ?
(
<div class="item active">
<img src={pictureSrc} alt={i} style={{ width: "100%", height: "auto" }} />
/div>
) :
(
<div class="item">
<img src={pictureSrc} alt={i} style={{ width: "100%", height: "auto" }} />
</div>
)
)
}

`

answered Nov 09 '17 at 07:34

Jayabalaji J

1,016
7
9

i post image.please click above the link. – kmk Nov 09 '17 at 07:51
If the data received from the fetch call has proper data and the state picture is an array, this should work – Jayabalaji J Nov 09 '17 at 08:34
can you post the data which you get from fetch call – Jayabalaji J Nov 09 '17 at 09:19

How to set image path when a component receives a dynamic id from another in reactjs?

1 Answers1