2

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

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;
1
  • puzzle様、 ここ数日の苦闘が嘘の様に即解決されました。そうゆう方法があったのですね?本当に感謝いたします。 Commented 2023年1月12日 11:31

1 件の回答 1

4

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。