Блог

Главная - Вопросы по программированию - Каков синтаксис для отображения URL-адреса состояния img в React?

Каков синтаксис для отображения URL-адреса состояния img в React?

#reactjs #amazon-web-services #amazon-s3 #state

#reactjs #amazon-веб-сервисы #amazon-s3 #состояние

Вопрос:

Я думаю, что у меня есть простой вопрос, на который я не нашел ответа, который бы мне подошел.

Основная идея такова: как только пользователь загрузит изображение в aws s3, оно отобразится (чтение из базы данных все еще продолжается, но оно будет работать, как показано ниже /-).

Почему приведенный ниже 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, я не могу просто импортировать изображение, но потребуется его динамическое изменение.

Какой синтаксис следует использовать здесь?

Ответ №1:

uploadedImaged вероятно, это недопустимая URL-ссылка, если функция uploadFile не возвращает URL-адрес, сгенерированный для файла. Вы должны обновить состояние URL-адресом для файла, созданного в s3.

Комментарии:

1. 1) Я инициализирую состояние, как указано выше, не вызывая его ниоткуда. 2) Как только я обновлю файл изображения, я бы хотел установить состояние с новым URL-адресом, и это должно отобразить новый файл. 3) Извините, что не добавил функцию загрузки, это был бы пользовательский ввод.

2. @RaitisLebedevs, какое возвращаемое значение uploadFile ?

3. это ссылка на изображение, которое было размещено на aws s3. Ни по умолчанию, ни ссылка не работают. Например. Если бы я мог отобразить ссылку, если бы я жестко запрограммировал установленное состояние, это работало бы хорошо.

4. добавлено к деталям, но это не имеет большого значения, поскольку не может отображать изображение из состояния, если я жестко закодирую там значение.

Ответ №2:

Я не совсем уверен, почему я все еще не могу использовать состояние для URL-адреса img, но оказывается, что если вы берете URL-адрес непосредственно из MongoDB и помещаете в HTML, он отображается. Это то, что я хотел сначала.

На этот раз средний этап разработки не был необходим.