在 React 中显示图像

Question

我是 ReactJS 的新手，我正在尝试将图像合并到我正在处理的网页上。我的目标是随机选择和显示图像。我没有收到任何语法错误，但我的网页上没有显示任何图像。这不是使用 ReactJS 显示图像的正确方法吗？任何指导将不胜感激！

import React, { useState, useEffect } from 'react';
import image2019_0201 from '../images/2019_0201.jpeg';
import image2019_0202 from '../images/2019_0202.jpeg';
import image2019_0203 from '../images/2019_0203.jpeg';

const images = [
    image2019_0201,
    image2019_0202,
    image2019_0203,
];

export default function RandomWelcomePicture() {
    const [currentImageIndex, setCurrentImageIndex] = useState(Math.floor(Math.random() * images.length))
    const changeImage = () => {
      const randomNumber = currentImageIndex;
      setCurrentImageIndex(randomNumber);
    }
    useEffect(() => changeImage(), [])
  
    return (
      <image
          src={images[currentImageIndex]}
      />
    )
  }

我随机选择三张图片中的一张显示在页面上。

Answer 1

不存在名为 image 的 JSX 标签。

将image替换为img

<img
    src={images[currentImageIndex]}
  />

Answer 2

import React, { useEffect, useState } from "react";

export default function App() {
  const Img = [
    "https://media.istockphoto.com/photos/doctor-in-a-home-visit-to-a-senior-man-picture-id1289183630?b=1&k=20&m=1289183630&s=170667a&w=0&h=FMmzSvzUCtDAoqKn4idZNAfolbjsJFMigUI1IsnLhdc=",
    "https://media.istockphoto.com/photos/close-up-of-small-blue-gray-mobile-home-with-a-front-and-side-porch-picture-id1297687835?b=1&k=20&m=1297687835&s=170667a&w=0&h=Kj4yvWxQxYo_fc9801IJZrHCAXa06LNsiRLjovVfoQQ=",
    "https://media.istockphoto.com/photos/an-asian-chinese-female-barista-making-coffee-with-coffee-machine-at-picture-id1281786410?b=1&k=20&m=1281786410&s=170667a&w=0&h=KRip-2qWjKkAMx9tNc97yWcBRTNMExmU2bgPiNm6wZQ="
  ];
  const [currentImageIndex, setCurrentImageIndex] = useState();

  const imageChandHandler = () => {
    setCurrentImageIndex(Math.floor(Math.random() * Img.length));
  };

  useEffect(() => imageChandHandler(), []);

  return (
    <div>
      <img src={Img[currentImageIndex]} alt="Image" />
      <button onClick={imageChandHandler} style={{ display: "block" }}>
        Genereate Image
      </button>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在 React 中显示图像

Displaying Images in React

javascript

image

reactjs