93315


以下の様なApp.jsがあり、dbから抽出した情報の一覧を表示させる記述があります。画像を表示させる為にimg
src内を以下の様にテキストと変数を連結した状態にしなければなりません。以下の設定では画像が表示されず、四角いボックスが表示されるだけです。''、""、あるいは{}で全体を覆ったりとあらゆることを試したり、ネット内の同様のケースを探し試しましたが、表示されません。試しに{url}{product.image}だけだと正しく連結されたurlが表示されます。よって、img
src内での連結方法ということになるかと思います。以下をどの様な設定にすれば宜しいかお教え頂けませんでしょうか？

[code]

    function App() {
    .........
    
        }
    
    const url = "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;
    
[/code]


CC BY-SA 4.0
2023-01-12T07:10:10.537
93313
2023-01-12T11:05:08.393
19211
question
javascript reactjs
react内のimg srcにてテキストと変数を連結したい。


波括弧`{}`の中は式として評価されるので、文字列の結合を行うことができます。

[code]

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


CC BY-SA 4.0
2023-01-12T11:05:08.393
93315
2023-01-12T11:05:08.393
56519
93313
answer