反应来自 src 的动态图像不公开

Question

I'm importing 3 images, depending on the value held in state I want to show one of the 3

import csv from '../../images/csv.svg';
import jpg from '../../images/jpg.svg';
import png from '../../images/png.svg';

in the state, I've got the file type

const [fileType, setFileType] = useState<'csv' | 'png' | 'png' | ''>('');

and in the body, I have the image

<img src={fileType} />

I'm populating the state from the file name

  useEffect(() => {
    if (file?.filePath) {
      const fileType = file?.filePath.slice(-3);
      setFileType(fileType);
    }
  }, [file?.filePath]);

The img src is always a string value not the file path, I suspect I'm storing the word 'jpg' instead of the reference to the jpg??

Answer 1

Yes you are correct. When you update your state to 'png', the image tag will render like this:

<img src="png">

This is not a valid url to an image so it can't be displayed correctly.

Idk the exact type of an imported image in React, but this is a workaround that should work in your case:

import img1 from './test.svg';
import img2 from './test2.svg';

export const ExampleComponent = () => {
  const [image, setImage] = useState<typeof img1 | null>(null);

  // Now you can call setImage with whatever image you want

  ...
}