How to use dynamic image path in next js

Question

I am new in reactjs and i am working with nextjs,I am fetching image from datbase via api, Right now i am getting image name with full path ( url.com/imagename) but i want to know how can we use dynamic path, in other words if i have only "image name" (not full path) so how can i append "image path" for display image using next js? I tried with following code

{this.state.books.map((post, index) => {
        return (
          <div className="col-md-4"
              <div className="bookimg">
                <img src={post.image} />
              </div>
            </div>
         )
    })}

"if i have only "image name" (not full path) so how can i append "image path" for display image" - Isn't this just a matter of appending the dynamic path to the image domain, e.g. const imageSrc = `https://example.com/${post.image}`;? — juliomalves
– juliomalves, Commented Jun 28, 2022 at 21:44

Mina · Accepted Answer · 2022-06-27 18:29:33Z

1

Let's say that post.image give you the image name only with mimi type.

{this.state.books.map((post, index) => {
    return (
      <div className="col-md-4"
          <div className="bookimg">
            <img src={`myurl.com/image/${post.image}`} />
          </div>
        </div>
     )
})}

edited Jun 27, 2022 at 18:29

answered Jun 27, 2022 at 17:44

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ritika goyal Over a year ago

actually i am trying to fetch image ( inserted by admin panel which is created in php not in react) so url will be "myurl.com/image/imagename" so right now i have image name ( fetching from db via api) so i am asking how can i append "imagepath" in front of that image, Hope you understand my point

Mina Over a year ago

So it will be src={myurl.com/image/${post.image}}, I updated the answer, please check.

Collectives™ on Stack Overflow

How to use dynamic image path in next js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related