时间戳

首页 > 解决方案 > 在 React 中显示状态 img Url 的语法是什么？

reactjs - 在 React 中显示状态 img Url 的语法是什么？

问题描述

我想我有一个简单的问题，我还没有找到适合我的答案。

主要思想是：一旦用户将图像上传到 aws s3，它将被显示（从 DB 中读取仍在进行中，但它将按以下方式工作）。

为什么下面的 img 没有在 React 中显示，如果我手动设置它它可以工作。：

  handleFiles = async (e) => {   
    const uploadedImage = await uploadFile(e.target.files[0]);
    this.setState({imgLink:uploadedImage})
  };

  state = {
    imgLink: "../../../images/person-01.jpg",
  };
  render() {
    .....
              <div className="bg-transfer">
                <img src={this.state.imgLink} alt="" />
              </div>
         .....
 <div className="single-file-input">
                <input
                  type="file"
                  id="user_image"
                  name="user_image"
                  onChange={this.handleFiles}
                />

上传文件：

import S3FileUpload from "react-s3";

const ID = "";
const SECRET = "";
//If bucket not set, getting 400 error.
const BUCKET_NAME = "";
//If Region not set then this isn't working, getting 400 error
const REGION_NAME = "";

const config = {
  bucketName: BUCKET_NAME,
  /*dirName: 'media', /* optional */
  region: REGION_NAME,
  accessKeyId: ID,
  secretAccessKey: SECRET,
  /*s3Url: 'https:/your-custom-s3-url.com/', /* optional */
};


export const uploadFile = async (file) => {  
  try {
    const response = await S3FileUpload.uploadFile(file, config)
    return response.location;    
  } catch (error) {
    console.log(error);
  }

};

我尝试使用 imgLink: "\"../../../images/person-01.jpg\"",，因为我认为我缺少链接，但它也不起作用。由于我将从 MongoDB 读取路径，因此我不能简单地导入图像，而是需要动态更改它。

这里应该使用什么语法？

标签： reactjsamazon-web-servicesamazon-s3state

解决方案

我不太清楚为什么我仍然不能使用 img URL 的状态，但事实证明，如果你直接从 MongoDb 获取 URL 并放在 HTML 中，它就会显示出来。这是我一开始想要的。

这次不需要中间显影步骤。

推荐阅读