Soy bastante nuevo en ReactJS y estoy tratando de incorporar una imagen en una página web en la que estoy trabajando. Mi objetivo es tener una imagen seleccionada al azar y mostrada. No recibo ningún error de sintaxis, pero no aparecen imágenes en mi página web. ¿No es esta la forma correcta de mostrar una imagen usando ReactJS? ¡Cualquier orientación sería muy apreciada!
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]} /> ) }Estoy seleccionando al azar una de las tres imágenes para que aparezcan en la página.
No existe una etiqueta JSX llamada image .
Reemplazar image con img
<img src={images[currentImageIndex]} /> 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>