❌ Error

localhost에서는 이미지가 잘 나왔는데, 배포 후 확인하니 이미지가 뜨지 않았다.

기존 코드

이미지의 위치는 src 폴더 아래에 넣어두었고, import해서 사용했다. 이미지를 하나만 넣는 경우에는 그냥 import해서 사용했지만, 이미지 여러 개를 반복문으로 출력하려니 잘 되지 않았다.

import imgSrc from 'assets/images/testImg.PNG';

const state = [
    {
        label: '2022-02-01',
        imgPathNormal: imgSrc,
        imgPathError: imgSrc
    },
    {
        label: '2022-02-02',
        imgPathNormal: imgSrc,
        imgPathError: imgSrc
    }
];

{state.map((step, index) => (
    <Stack key={step.label} direction="row">
        <figure>
            <Box
                component="img"
                sx={{
                    height: 255,
                    display: 'block',
                    maxWidth: 650,
                    overflow: 'hidden',
                    width: '100%'
                }}
                src={step.imgPathNormal}
                alt={step.label}
            />
            <StyleCaption>정상 상태</StyleCaption>
        </figure>
			...
    </Stack>
))}

✅ Solution

파일명만 이미지 경로의 변수로 설정해두고, 반복문에서 require를 사용해서 이미지 path를 설정했다. 이렇게 하니 배포 했을 때도 문제없이 이미지가 출력되었다.

const state = [
    {
        label: '2022-02-01',
        imgPathNormal: 'chart1',
        imgPathError: 'chart1',
    },
    {
        label: '2022-02-02',
        imgPathNormal: 'chart2',
        imgPathError: 'chart2',
    }
];

{state.map((step, index) => (
    <Stack key={step.label} direction="row">
        <figure>
            <Box
                component="img"
                sx={{
                    height: 255,
                    display: 'block',
                    maxWidth: 650,
                    overflow: 'hidden',
                    width: '100%'
                }}
				// **require** 를 사용해서 이미지를 불러왔다.
                src={require('assets/images/charts/' + step.imgPathNormal + '.png')}
                alt={step.label}
            />
            <StyleCaption>정상 상태</StyleCaption>
        </figure>
			...
    </Stack>
))}

참조
https://stackoverflow.com/questions/62110521/how-to-map-images-in-reactjs