React动态加载图片失败求助：SpringBoot+Axios栈解决方案咨询

问题背景 #

我使用ReactJS、Axios、SpringBoot技术栈开发，目前遇到一个核心问题：前端通过require加载图片时，只有直接传入带双引号的完整文件路径才有效；但如果通过拼接父文件夹路径和图片文件名的动态方式生成路径，无论怎么组合都无法加载图片。我希望调用后端接口获取文件路径字符串列表，在前端动态展示这些图片，但多次尝试均失败。

可行的图片加载代码 #

<img src={require("../fullStackFiles/206_1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg")} className="img-fluid" alt="house" />

无效的动态拼接尝试代码 #

const parent = "../fullStackFiles/"
const name = "206_1dbb9a3f-4c43-4ac2-b810-aa6b04d0dcb4_house.jpeg"
const symbol = "\""

<img src={require((test))} className="img" /> 
const test = symbol.concat(parent).concat(name).concat(symbol).toString()
const test2 = parent+name;
const test3 = symbol+parent+name+symbol;
const test4 = test3.toString();
const test5 = ( parent.concat(name).toString() );

前后端API实现代码 #

前端Axios请求逻辑 #

const loadImages = async () => {
  const images = await axios.get(`http://localhost:8080/fileSystem/getImages/${id}`);
  console.log("loading images called " + images.data);
  setImages(images.data);
};

后端SpringBoot接口 #

@GetMapping("/fileSystem/getImages/{propertyId}")
public String[] downloadMultipleImagesFromFileSystem(@PathVariable long propertyId) throws IOException {
    System.out.println("FINDING IMAGES CALLED");
    String[] paths = fileRepository.findImagesByPropertyId(propertyId);
    return paths;
}

额外咨询 #

作为初级开发者，我迫切想了解SpringBoot和API开发相关的最佳实践，以及需要重点学习的内容。

内容的提问来源于stack exchange，提问作者AJuniorDev