在 react 中显示从 web api 获得的图像答案

【问题标题】：show an image obtained from a web api in react在 react 中显示从 web api 获得的图像
【发布时间】：2020-06-04 00:40:05
【问题描述】：

我在 asp net core 中有一个 web api：

    [HttpGet("{id}")]
    public async Task<ActionResult> GetFileSystemStoreObject(string id)
    {
        var archivo = await _context.FileSystemStoreObject.FindAsync(id);

        if (archivo == null)
        {
            return NotFound();
        }
         ...
        var image = System.IO.File.OpenRead(rutaArchivo);
        return File(image, "image/jpeg");

    }

我想从我的反应应用程序中显示图像。但我不知道该怎么做。我已经尝试了以下反应，但它不起作用。

function NoticiaFoto({url}) {

    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [item, setItem] = useState([]);

    let ruta = 'https://localhost:44357/api/filesystemstoreobjects/'  + url;

    useEffect(() => {
        fetch(ruta)
            .then(res => res.json())
                .then(
                    (result) => {
                        setIsLoaded(true);
                        setItem(result);
                    },
                    (error) => {
                        setIsLoaded(false);
                        setError(error);
                    }
            )
    }, [])


    return(
        <div><img src={item} alt= "foto" /></div>
    )

}
export default NoticiaFoto

我已经测试了 API，它运行良好。

我不知道如何从反应中获取图像并将其显示在屏幕上。

请帮忙。

【问题讨论】：

尝试将img元素的height和width属性设置为某个值
fetch 的“结果”数据是什么？ base64、arrayBuffer 等...

标签： reactjs

【解决方案1】：

将计算的url 分配给src 属性应该没问题。

const NoticiaFoto = ({id}) => {
  const url = `https://localhost:44357/api/filesystemstoreobjects/${id}`;

  return <div>
    <img src={url} alt= "foto" />
  </div>
}

ReactDOM.render(
    <NoticiaFoto id={1} />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案2】：

解决此问题的最佳方法是形成一个 URL，该 URL 通过 FTP 从您的服务器访问文件。

let image_url = "http://server_address/your_public_folder/file_name";



return(
        <div><img src={image_url} alt= "foto" /></div>
    )

【讨论】：