Реакция: Как назначить изображение, хранящееся в Firebase Storage, элементам, хранящимся в базе данных Firebase?

Question

Я отображаю список элементов, хранящихся в базе данных Firebase, и мне интересно, можно ли назначить отдельное изображение (хранящееся в хранилище Firebase) для каждого отдельного элемента в списке.

Iреализовал функцию загрузки, которая впоследствии может отображать последний загруженный файл, но я не могу понять, как назначить изображение для элемента в моей базе данных, которое постоянно отображается рядом с элементом при визуализации.

Код компонента AdminPanel:

class AdminPanel extends Component {
  constructor() {
    super();
    this.state = {
      companyName: '',
      ownerName: '',
      items: [],
      search: '',
      image: '',
      imageURL: '',
      progress: 0,
      images: null
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('items');
    const item = {
      companyNameObj: this.state.companyName,
      ownerNameObj: this.state.ownerName
    }
    itemsRef.push(item);
    this.setState({
      companyName: '',
      ownerName: ''
    });
  }

  componentDidMount() {
    const itemsRef = firebase.database().ref('items');

    itemsRef.on('value', (snapshot) => {
      let items = snapshot.val();
      let newState = [];
      for (let item in items) {
        newState.push({
          id: item,
          companyNameObj: items[item].companyNameObj,
          ownerNameObj: items[item].ownerNameObj
        });
      }
      this.setState({
        items: newState
      });
    });
  }

  removeItem(itemId) {
    const itemRef = firebase.database().ref(`/items/${itemId}`);
    itemRef.remove();
  }

  handleUploadStart = () => {
    this.setState({
      progress: 0
    })
  }

  handleUploadSuccess = filename => {
    this.setState({
      image: filename,
      progress: 100
    })

    firebase.storage().ref('images').child(filename).getDownloadURL().then(url => this.setState({
      imageURL: url
    }))
  }

  render() {

    var image = this.state.imageURL;

    let filteredItems = this.state.items.filter(
      (item) => {
        return item.companyNameObj.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
      }
    );

    return (
      <div>
        <h1>ADMIN PANEL</h1>
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="ownerName" placeholder="Company name: " onChange={this.handleChange} value={this.state.ownerName} />
          <input type="text" name="companyName" placeholder="Owned by: " onChange={this.handleChange} value={this.state.companyName} />
          <button>Add Company</button>
          <input type="text" name="search" placeholder="Search: " onChange={this.handleChange} value={this.state.search} />
        </form>

          <label>
            <p>Progress: </p>
            {this.state.progress}
          </label>

          <label>
            <p>Image: </p>
            {this.state.image && <img src={this.state.imageURL} />}
          </label>

          <FileUploader
            accept='image/*'
            name='image'
            storageRef={firebase.storage().ref('images')}
            onUploadStart={this.handleUploadStart}
            onUploadSuccess={this.handleUploadSuccess}
          />

          <ul>
            {filteredItems.map((item) => {
              return (
                <li key={item.id}>
                  <h3>{item.companyNameObj}</h3>
                  <p>Owned by: {item.ownerNameObj}</p>
                  {<img src={this.state.imageURL} />}
                  <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
                </li>
              )
            })}
          </ul>
      </div>
    );
  }
}

export default AdminPanel;

Answer 1

Мне удалось реализовать решение благодаря ответу @ Juanje:

Вам необходимо получить URL-адрес из FirebaseStorage и поместить его в объект RealtimeDatabase или Firestore.

Я сопоставил URL-адрес изображения с объектом изображения в моем методе handleSubmit (e) и поместил объект URL-адреса в базу данных в моем методе componentDidMount () следующим образом:

  handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('items');
    const item = {
      companyNameObj: this.state.companyName,
      ownerNameObj: this.state.ownerName,
      imageObj: this.state.imageURL
    }
    itemsRef.push(item);
    this.setState({
      companyName: '',
      ownerName: '',
    });

    console.log(item);
  }

и

  componentDidMount() {
    const itemsRef = firebase.database().ref('items');

    itemsRef.on('value', (snapshot) => {
      let items = snapshot.val();
      let newState = [];
      for (let item in items) {
        newState.push({
          id: item,
          companyNameObj: items[item].companyNameObj,
          ownerNameObj: items[item].ownerNameObj,
          imageObj: items[item].imageObj
        });
      }
      this.setState({
        items: newState
      });
    });
  }

Чтобы отобразить URL, я добавил тег в свой отображенный список и передал imageObj, который содержит хранилище Firebase в качестве источника, следующим образом:

          <ul>
            {filteredItems.map((item) => {
              return (
                <li key={item.id}>
                  <h3>{item.companyNameObj}</h3>
                  <p>Owned by: {item.ownerNameObj}</p>
                  <img src={item.imageObj} />
                  <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
                </li>
              )
            })}
          </ul>

Answer 2

Вам необходимо получить URL-адрес из FirebaseStorage и поместить его в объект RealtimeDatabase или Firestore.