Question

大家好，我对ReactJS＆amp; nodeJS作为前端＆amp;后端。到目前为止，我已经得到了一些帮助，例如以选择的形式显示表格的所有输出，但现在我正在努力寻找图像......

我的队友必须将图像放在数据库中，但他将它们本地存储在一个带有multer的文件夹中。所以现在他需要图像的链接（例如＆＃34; ./ picture.jpg＆＃34;）所以他可以使用img src发布图像..问题是我们似乎无法实现一个简单的任务，获取图像的URL并将其放入常量。

这是代码

＆＃13;

class Collection extends React.PureComponent {


  constructor() {
    super();

    this.state = {
      images: [],
    };
  }
  async componentDidMount() {


const response = await fetch('http://localhost:3004/getImages');
    const newList = await response.json();
    this.setState(previousState => ({
      ...previousState,
      images: newList,
    }));

  }

  render() {

    return (
      <div>
          {this.state.images.map(obj => obj.image).map((image, index) => <img src={require (image)} key={index} value={image} />)}
          
       <img src={require ("./image.jpg")} class="responsive-img" />
      }
      </div>
    );
  }
}

export default Collection;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

所以fetch正在运行，这里是localhost的返回：3004 / getImages：[{＆＃34; image＆＃34;：＆＃34; ./ ouss.jpg＆＃34;}] < / p>

第二个是作为一个例子。但是我们想要添加所有图像，甚至只使用映射显示一个图像。我们得到的错误是＆＃34;无法找到模块＆＃34;。＆＃34;＆＃34;。

这看起来很容易，但我们无法实现它。

任何人都可以提供帮助吗？

Answer 1

首先，您需要检查后端以验证multer是否将图像存储在可公开访问的图像中，否则您将无法通过图像URL访问该图像。

其次，我假设图像url存储在数据库中，并在向api发出get请求时作为有效负载的一部分。

然后在地图功能中，您需要做的就是将每个图像放在图像src中，如下所示：

{this.state.images.map(image => <image key={image.id} src={image.imageSrc} />)} //where 'imageSrc' is the property you stored your imagePath in your database with.

ReactJS从数据库获取URL以发布图像？

1 个答案: