Question

我在尝试将动态图片插入＆＃34;卡片时遇到了一些困难。我要渲染。我从Firebase数据库加载组件的必要信息（包括图像的相对路径），并在回调函数期间，将每个创建的组件推送到我向页面呈现的数组中。

问题是<img src={fly.image)/>无法正常工作，尽管正在加载正确的路径（我已经检查过）并且图片已正确导入。这是代码：

import React, { Component } from 'react';
import * as firebase from 'firebase';
import './Flies.css'
import Adams from './images/adams.jpg'
import Bugger from './images/bugger.jpg'
import Caddis from './images/caddis.jpg'
import Hendrickson from './images/hendrickson.jpg'



class Flies extends Component {

  constructor(props){
    super(props);
    this.state = {
      flies: []
    }
  }


  componentDidMount(){
    var allFlies = firebase.database().ref('flies');
      allFlies.on('value', function(snapshot){
          var myObj = snapshot.val();
          var array = Object.keys(myObj).map(key => myObj[key])


          //FORMAT THE DATA FOR THE FLYCARDS
          const flyItems = array.map((fly, index) =>
              <div className="flyCard" key={index} id={fly.id}>
                <h3>{fly.name}</h3>
                <img src={fly.image}/>
                <div className="details">
                  <p>Hook size: {fly.hooksize}</p>
                  <p>Thread: {fly.thread}</p>
                  <p>Hackle: {fly.hackle}</p>
                  <p>Link: <a href={fly.youtube}>Youtube</a></p>
                </div>
              </div>
            );

          //ASSIGN FLYCARDS TO STATE FOR DISPLAY
          this.setState({flies:flyItems})
       }.bind(this))
  }

  render() {
    return (
      <div className="flies">
        <h1>Fly test</h1>
        <div>
          {this.state.flies}
        </div>
      </div>
    );
  }
}

export default Flies;

这将呈现断开链接的图像。但是，它会起作用，因为它直接引用了导入。问题是，我不确定如何使{Adams}部分动态，这就是我从Firebase加载路径（./images/adams.jpg）的原因。我相信当Webpack编译所有内容时，相关路径会发生变化，这可以解释为什么它不起作用。尽管如此，我还是不确定这里有什么正确的解决方案，即使在阅读其他几个小时有类似问题的人之后也是如此。任何帮助将不胜感激!!

在使用map迭代列表时，在React中渲染动态图像

0 个答案: