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

【问题标题】：ReactJS getting URL from a database for posting images?ReactJS 从数据库中获取 URL 以发布图像？
【发布时间】：2018-03-10 22:43:51
【问题描述】：

大家好，我对 ReactJS 和 nodeJS 作为前端和后端有点陌生。到目前为止，我在一些事情上得到了帮助，比如以选择形式显示表格的所有输出，但现在我正在为图像而苦苦挣扎。..

我的队友必须将图像放入数据库，但他将它们本地存储到具有 multer 的文件夹中。所以现在他需要图片的链接（比如“./picture.jpg”），这样他就可以使用 img src 来发布图片了。问题是我们似乎无法轻松完成任务，获取 url图像并将其放入常量中。

这是代码

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;

<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>

所以获取工作正常，这是 localhost:3004/getImages 的返回：[{"image":"./ouss.jpg"}]

第二个是一个例子。然而，我们想添加所有的图像，甚至只是使用映射显示一个。我们得到的错误是“找不到模块”。“”。

这似乎很容易做到，但我们无法做到。

有人可以帮忙吗？

【问题讨论】：

img 标签将通过提供路径或链接来获取您的图像，您不需要使用 require
检查您存储图像的文件夹是否是公开的，以便您可以访问它们
哪一行出现错误？

标签： javascript node.js database image reactjs

【解决方案1】：

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

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

然后在你的map函数中，你需要做的就是把每张图片放到一个图片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.

【讨论】：