时间戳

首页 > 解决方案 > img 未显示在 img 标签 reactjs 中

reactjs - img 未显示在 img 标签 reactjs 中

问题描述

我将我的 img 保存在状态和数据库中，我试图将它作为我的 img 标签中的 src 传递，但它没有呈现任何内容。有什么建议么？

const fileselectedHandler = (event : any) => {
    newImg(event.target.files[0])
}

    const [img,newImg] = useState()

            <img src={img} />

标签： reactjs

解决方案

从后端它取决于数据的发送方式，如果您只是想从输入字段访问图像，那么这将是实现。

TL;DR单击下面的运行代码片段以查看它的工作情况。

我还写了几篇关于该主题的文章：

链接：

使用 React 和 Fetch 下载 API 文件

构建一个 React 拖放进度文件上传器

// main.js
const { useState } = React;

const App = () => {
  // State / Props
  const [preview, setPreview] = useState(null);
  
  // Functions
  const onInputFileChange = event => {
    // reset each time
    setPreview(null);
    
    // Define supported mime types
    const supportedFilesTypes = ['image/jpeg', 'image/png'];
    
    if (event.target.files.length > 0) {
      // Get the type of the first indexed file
      const { type } = event.target.files[0];

      if (supportedFilesTypes.indexOf(type) > -1) {
        const reader = new FileReader();
        reader.onload = e => { setPreview(e.target.result); };
        reader.readAsDataURL(event.target.files[0]);
      }
    }
  };
  
  return (<div><h1>Choose an image</h1><input onChange={onInputFileChange} type="file" name="file" />{preview && <img src={preview} />}</div>);
};


ReactDOM.render(<App />, document.getElementById('root'));
body {
  padding: 10px;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 18px;
  margin: 0 0 10px 0;
}

input {
  background: #efefef;
  margin-bottom: 10px;
  padding: 6px;
  border-radius: 4px;
}

img {
  max-width: 600px;
  height: auto;
  border: 4px solid #ccc;
 }
<body>
<div id="root"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script type="text/babel" src="main.js"></script>
</body>

推荐阅读