I am building a NFT dApp example with React. On my homepage, I show the image of the latest minted NFT. When people open the image on new tab, they can see that it has the 37.png suffix in the link, and manually change the link to 38.png, or 39.png and see the next images. I don't want them to.
In this js, I call a function like this to call the image and set it with setLatestMintPic:
async function setLatestMint() {
const ContractObj = impContract;
const latestMintResult = await ContractObj.methods.totalSupply().call();
setLatestMintPic("https://nftornek.000webhostapp.com/cryptonauts/image/" + latestMintResult + ".png");
lastMintJson = "https://cors-anywhere.herokuapp.com/https://nftornek.000webhostapp.com/cryptonauts/json/" + latestMintResult + ".json";
let res = await axios.get(lastMintJson);
setModel(setNFTModel(res.data));
}
And I show it like this on return:
<div style={{ width: '350px', border: '2px solid #38495a', borderRadius: '5px' }}><img src={latestMintPic} alt=""></img>
People can see the link in the console, or by opening it. They can change it and see other images. It is not very safe, so I am asking for a way to do something like hashes to make it safer. Is it possible in React? Thanks in advance.