Next.js cant use dynamic image url

Question

I am trying to assign image src which i get from api :

        {articles.items.map((item, key) => (
            <div class="col-lg-4">
                <div class="blog-card">
                <img src="{item.thumbnail}"/> // here
                <h2>{item.title}</h2>
          
        <p dangerouslySetInnerHTML={{__html: ' ' + item.description.slice(0,450) + '...'}}></p>
        <div>
        {item.categories.map((tag, key) => (
        <span className="tag">{tag}</span>
              ))}

But instead i am getting this in my html :

<img src="{item.thumbnail}"/> // Not really converted

How to load my dynamic image ?

Lyuboslav Alexandrov · Accepted Answer · 2020-10-07 06:24:00Z

3

Just remove the parentheses:

<img src={item.thumbnail} />

answered Oct 7, 2020 at 6:24

Lyuboslav Alexandrov

3671 gold badge2 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Next.js cant use dynamic image url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related