Antd 库:尝试渲染图像时如何处理? [英] Antd library: How to approach when trying to render an image?

问题描述

尝试渲染图像时如何处理?我在下面尝试，但没有显示图像.

const 列 = [{title: '图像',dataIndex: 'notificationImage.url',键:'notificationImage.url'，渲染:(记录)=>//console.log(text, record &&record.notificationImage &&record.notificationImage.url, index){记录&&record.notificationImage &&}},]

解决方案

我认为你的代码块应该是这样的:

添加return

render: (record) =>{退货记录&&record.notificationImage &&//<---- 这里}

或

删除大括号，因为你只有一行执行

render: (record) =>记录&&record.notificationImage &&

<小时>

我还添加了代码片段，希望能解开你的疑惑

const { useState , useEffect } = React;const App = () =>{var res = {图片" : {"url" : "https://i.stack.imgur.com/GLI4g.png?s=328&g=1"}}const getImage = () =>{资源&&res.image &&<img src={res.image.url}/>}const getImage2= () =>{返回资源&&res.image &&<img src={res.image.url}/>}const getImage3= () =>资源&&res.image &&<img src={res.image.url}/>;返回 (<div>第一的 :{getImage()}<小时/>第二 :{getImage2()}<小时/>第三 :{getImage3()}

);}ReactDOM.render(, 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>

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 :

Add 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屋！