[英]Antd library: How to approach when trying to render an image?
嘗試渲染圖像時如何處理? 我在下面嘗試,但它沒有顯示圖像。
const columns = [
{
title: 'image',
dataIndex: 'notificationImage.url',
key: 'notificationImage.url',
render: (record) =>
//console.log(text, record && record.notificationImage && record.notificationImage.url, index)
{
record && record.notificationImage &&
<img
width="460" height="345"
src={record.notificationImage.url} />
}
},]
我認為您的代碼塊應如下所示:
添加return
render: (record) =>
{
return record && record.notificationImage && // <---- HERE
<img
width="460" height="345"
src={record.notificationImage.url} />
}
或者
刪除大括號,因為你有一行執行
render: (record) => record && record.notificationImage &&
<img
width="460" height="345"
src={record.notificationImage.url} />
我還添加了代碼片段,希望能消除您的疑慮
const { useState, useEffect } = React; const App = () => { var res = { "image": { "url": "https://i.stack.imgur.com/GLI4g.png?s=328&g=1" } } const getImage = () => { res && res.image && <img src={res.image.url} /> } const getImage2= () => { return res && res.image && <img src={res.image.url} /> } const getImage3= () => res && res.image && <img src={res.image.url} />; return ( <div> First: {getImage()} <hr/> Second: {getImage2()} <hr/> Third: {getImage3()} </div> ); } ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react-root"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.