Javascript 如何使用循环在react中显示图像

我有一个循环对象数组来显示它的数据，但是当我在循环中使用img标记时，图像不会显示

我尝试过使用react图像，但效果不明显。我意识到，如果src是一个路径而不是一个链接，则图像不会显示，它只显示src是否是一个链接

// App.js
import React, {Component} from 'react';
import './App.css';
import { projects } from './myData';
import Img from "react-image";

class App extends Component {
  render(){
            return (
              <div className="App">

                {projects.map(p => {

                  return <img key={p.id} src={p.src} alt="can't show image" />;
                })}
              </div>
            );
          }
}

export default App;

// myData.js
export const projects = [
         {
           id: 1,
           name: "Tic Tac Toe game",
           src: "http://www.m9c.net/uploads/15682238971.gif"
         },
         {
           id: 2,
           name: "Tic Tac Toe game",
           src: "./images/tictactoe.gif"
         }
       ];

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“/myData”导入{projects}；
从“反应图像”导入Img；
类应用程序扩展组件{
render（）{
返回(
{projects.map（p=>{
返回；
})}
);
}
}
导出默认应用程序；
//myData.js
导出常量项目=[
{
id:1，
名称：“井字游戏”，
src:“http://www.m9c.net/uploads/15682238971.gif"
},
{
id:2，
名称：“井字游戏”，
src:“./images/tictactoe.gif”
}
];

---

我希望能够使用本地路径显示图像，我的整个项目不与服务器通信，我不需要它。

您的源代码正在查看

{props.src}

而不是

{p.src}

{projects.map（p=>{
返回；
})}

您好，我认为问题可能与图像路径有关，因为实现很好，但可能尝试另一种方法

这是如何在同一文件夹中加载本地映像的示例

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

从“React”导入React；
从“./logo.png”导入徽标；//告诉Webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；
}
导出默认标题；

因此，当您查看此应用程序时，它在浏览器的地址栏中显示了什么？例如，它在哪里以及如何托管？@ChrisG我还在本地工作这意味着什么？地址栏上写了什么？URL是否以

文件：//

开头？您正在使用webpack进行构建吗？创建react应用程序？你把图片放在公用文件夹里了吗？你在使用网页包吗？你可能需要一个文件加载器或者确保你的图片在你的公共文件夹中。我现在把照片放在公共文件夹中，改变了路径，它就工作了！老实说，我是一个初学者，我以前从未想过这一点，尽管我在这里发帖之前询问过周围的人^^，无论如何，谢谢！很好的发现，但是OP的代码会导致错误，他们看不到任何图像，所以我们可以假设这个错误不在他们的实际代码中。你是对的，修复了它，那只是一个复制粘贴问题。我尝试使用不同的组件，但没有任何改变