I have an application in React, in which I need to show the image called dice1.jpg (only in case 1 of the switch), but I can't do it, when I pass its value through the console it shows me the address correctly.
import react, { useState } from "react";
import { useParams } from "react-router-dom";
export const RollTheDice = () => {
const [getValue, setValue] = useState("");
const [getDice, setDice] = useState("");
function Roll() {
let value = Math.floor(Math.random() * 6 + 1);
switch (value.toString()) {
case "1":
setDice("../img/dice1.jpg");
break;
case "2":
setDice("⚁");
break;
case "3":
setDice("⚂");
break;
case "4":
setDice("⚃");
break;
case "5":
setDice("⚄");
break;
case "6":
setDice("⚅");
break;
}
setValue(value);
}
return(
<div>
<h1>Presione el boton para girar el dado</h1>
<button onClick={() => Roll()}>Girar el dado</button>
<h2>
El resultado es: <b>{getValue}</b>
</h2>
<p>
<h1>{getDice}</h1>
<img src={getDice} />
</p>
</div>
);
};
This image is of the file tree, where you see each of the components and the location of the images. The file where the code I gave you is called RollTheDice.js and it is located in the /src/components folder, so the address relative to the image should be ../img/dice1.jpg