I want to combine text and variables with img src in react.

Asked 1 years ago, Updated 1 years ago, 437 views

There is an App.js that shows a list of information extracted from db.In order for the image to be displayed, the text and variables must be connected in the img src as follows:The following settings do not display images, only square boxes are displayed.I tried everything, covering the whole thing with '', '', or {}, and tried to find a similar case in the net, but it didn't show up.Only {url} {product.image} will display a correctly connected url.Therefore, I think it's a connection method within img src.Could you tell me what kind of settings I should set below?

functionApp(){
.........

    }

consturl="https://xxxxx.com/img/";   

  return(
    <div className="App">
        <div>
              <tbody>
                    {Object.values(products).map(product,key)=>                  
                        <tr key={key}>                          
                            <td><img src={url}{product.image}></img></td>
                        </tr>
                    )}                    
             </tbody>
       </div>
  </div>
  );
}

export default App;

javascript reactjs

2023-01-12 16:34

1 Answers

Braces {} are evaluated as expressions, so you can combine strings.

<td><img src={url+product.image}></img></td>


2023-01-12 18:21

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.