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

Question

我遍历了这个对象数组以显示其数据，但是当我在循环中使用img标记时，图像将不会显示

我试过使用react-image，但渲染效果不明显。我意识到如果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"
         }
       ];

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

Answer 1

你好，我想问题可能与图像的路径有关，因为它的实现很好，但也许可以尝试另一种方法。

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

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;

Answer 2

您的来源正在查看{props.src}，而不是{p.src}

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