로컬 이미지 파일을 웹 페이지에 표시하기 위해 html img tag의 src 속성에 경로(절대경로)를 설정하는 방법

<img th:src="${item.imgUrl}" class="card-img-top"
     th:alt="${item.itemNm}" height="400">

#상품 이미지 업로드 경로
itemImgLocation=/Users/rowan/Dev/images/shop/item

#리소스 업로드 경로
uploadPath=file:///Users/rowan/Dev/images/shop

public void saveItemImg(ItemImg itemImg, MultipartFile itemImgFile) throws Exception {
    String oriImgName = itemImgFile.getOriginalFilename();
    String imgName = "";
    String imgUrl = "";

    //파일 업로드
    if(!StringUtils.isEmpty(oriImgName)) {
        imgName = fileService.uploadFile(itemImgLocation, oriImgName, itemImgFile.getBytes());
        imgUrl = "/images/shop/item/" + imgName;
    }

    //상품 이미지 정보 저장
    itemImg.updateItemImg(oriImgName, imgName, imgUrl);
    itemImgRepository.save(itemImg);
}

public void updateItemImg(Long itemImgId, MultipartFile itemImgFile) throws Exception {
    if(!itemImgFile.isEmpty()) {
        ItemImg savedItemImg = itemImgRepository.findById(itemImgId)
        		.orElseThrow(EntityNotFoundException::new);

        //기존 이미지 파일 삭제
        if(!StringUtils.isEmpty(savedItemImg.getImgName())) {
            fileService.deleteFile(itemImgLocation + "/" + savedItemImg.getImgName());
        }

        String oriImgName = itemImgFile.getOriginalFilename();
        String imgName = fileService.uploadFile(itemImgLocation, oriImgName, itemImgFile.getBytes());
        String imgUrl = "/images/shop/item/" + imgName;
        savedItemImg.updateItemImg(oriImgName, imgName, imgUrl);
    }
}

imgUrl 값에 로컬 경로(/Users/rowan/Dev/images/shop/item/)가 포함되어 있기 때문에, 웹 페이지에서는 해당 이미지 파일에 접근할 수 없습니다. 웹 브라우저는 로컬 파일 시스템에 직접 접근할 수 없기 때문입니다.

대신, imgUrl 값을 웹에서 접근 가능한 경로로 수정해야 합니다. 예를 들어, 웹 서버에서 해당 이미지 파일이 서비스되는 경로(/images/shop/item/)로 수정할 수 있습니다. 그러면 imgUrl 값은 "/images/shop/item/" + imgName과 같이 수정될 수 있습니다.

그리고 img 태그에서 src 속성에는 imgUrl 값이 아닌, 웹에서 접근 가능한 경로를 입력해야 합니다. 예를 들어, src="/images/shop/item/{filename.jpg}"과 같이 입력하면 해당 이미지를 웹 페이지에서 로드할 수 있습니다.

html img 태그의 src 속성(url) 값에는 로컬 경로가 포함되면 안된다. 웹 브라우저는 로컬 파일 시스템에 직접 접근할 수 없기 때문이다.
ex) /Users/rowan/Dev/images/shop/item/ 대신에 /images/shop/item/ 사용