时间戳

首页 > 解决方案 > 如何通过道具将对象数组中的src传递给另一个组件，有人可以向我解释为什么我不能显示我的图像

reactjs - 如何通过道具将对象数组中的src传递给另一个组件，有人可以向我解释为什么我不能显示我的图像

问题描述

import React from 'react';
import Gallery from '../Gallery/Gallery';

const Galleries = (props) => {
  const galleries = [
    {
      name: 'natur',
      src: ' ../../Images/photographer-gfc1c015b1_1920.jpg',
    },

    {
      name: 'moutain',
      src: ' ../../Images/photographer-gfc1c015b1_1920.jpg',
    },
  ];
  return (
    <div>
      {/* generate the numbre of data */}
      <h1>I have {galleries.length} Images</h1>

      {galleries.map((gallery) => (
        <Gallery name={gallery.name} galery={gallery.src} />
      ))}
    </div>
  );
};

export default Galleries;

import React from 'react';

const Gallery = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <img src={props.src} alt="" style={{ height: '200px', width: '300px' }} />
    </div>
  );
};

export default Gallery;

标签： reactjsimage

解决方案

这是你的错误，使用了错误的道具，你正在通过这个<Gallery name={gallery.name} galery={gallery.src} />

更改此行，这是错误行，使用src，但您从未通过 src，

<img src={props.src} alt="" style={{ height: '200px', width: '300px' }} />

改成这个，这会很好，props.galery工作

<img src={props.galery} alt="" style={{ height: '200px', width: '300px' }} />

推荐阅读