Img未显示在img标签reactjs中

debugcn 发表于 Dev

妮卡·罗菲（Nika Roffy）

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

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

    const [img,newImg] = useState()

            <img src={img} />

编码方式

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。