Antd库:尝试渲染图像时如何处理? [英] Antd library: How to approach when trying to render an image?
本文介绍了Antd库:尝试渲染图像时如何处理?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试渲染图像时如何处理? 我在下面尝试,但未显示图片.
How to approach when trying to render an image? I am trying below but its not showing 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} />
}
},]
推荐答案
我认为您的代码块应如下所示:
I think your code block should look like this :
添加return
render: (record) =>
{
return record && record.notificationImage && // <---- HERE
<img
width="460" height="345"
src={record.notificationImage.url} />
}
OR
在执行一行时删除花括号
remove curly braces as you have one line execution
render: (record) => record && record.notificationImage &&
<img
width="460" height="345"
src={record.notificationImage.url} />
我还添加了代码段,希望能消除您的疑虑
I have also added code snippet, I hope that will clear your doubts
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>
这篇关于Antd库:尝试渲染图像时如何处理?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文