以下の様な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;