【问题标题】:React images not loading反应图像未加载
【发布时间】:2022-10-07 14:14:47
【问题描述】:

我正在使用 Reactjs。我有一个组件,我在地图函数中加载了图像

videos.map((clips) => {
  return (
    <tr key={clips._id}>
      <td>
        <div className=\"table-name-img\">
          <div className=\"img-container\">
            {clips.videoThumbnailUrl ? (
              <img
                src={clips.videoThumbnailUrl}
                alt=\"\"
                className=\"matchImageIcon\"
                style={{ cursor: \"pointer\" }}
                onLoad={() => {
                  console.log(55555);
                  setCount((count) => count + 1); // tried this way to rerender component but did not work
                }}
              />
            )}
          </div>
        </div>
      </td>
    </tr>
  );
});

但不幸的是,它不会加载图像。但是,当我再次更改选项卡时,它会加载。这里可能是什么问题?

  • 检查开发工具中的网络选项卡以检查是否已完成对服务器的所有图像请求。

标签: javascript html css reactjs


【解决方案1】:

我认为您应该在帖子中添加更多代码,因为我们看不到您将如何获取数据或更新您的视频数组。

【讨论】:

  • 数据完美呈现...因为除了图像之外还有其他字段并且数据显示完美...现在您可以发表评论