Images wont upload into a website even if they exist

The frontend js code won't upload images unless the name is typed out entirely and in double quotations. To show images dynamically, I can not concatenate or "+" parent folder and image name.

My STACK: reactJS, Axios, springboot

I want to call the backend, get a list of filepaths(strings), and dynamically show images on the front end with those file paths. Simple enough. However, every time I try to show the images on the front end, it doesn't work. Firstly this works

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

THIS DOESNT WORK:

   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() );

Or any of the other tests I have tried with so many permutations, but I can't just get it to work. And if I can't get it to work with this style, I wont be able to use the data from my API.

API FE


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

API BE (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;
        }

Please let me know if you have any best practices you would like to share about Springboot and APIs and anything I need to learn.

I am still a junior and eager to learn.

Solution

Given these variable definitions:

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

Going through your attempts:

const test = symbol.concat(parent).concat(name).concat(symbol).toString()

test will result in a string which contains a " as its first and last characters, which is incorrect (the quotation marks are to wrap around the string, not to embed inside it!) Also the toString() at the end is redundant, because it's already a string.

const test2 = parent+name;

test2 should result in a valid filepath, assuming you define it before you try to use it. (Your code sample shows you using it before you define it, though I'm not sure the jumbling-together of HTML and javascript in your question accurately represents what you're doing in your code; it should result in syntax errors if you're doing it exactly like you've shown here.)

const test3 = symbol+parent+name+symbol;

test3 will have identical output to test. Adding strings together is treated in javascript as concatenation; the problem here is you've incorrectly embedded the quotation marks as part of the string itself.

const test4 = test3.toString();

test4 is identical to test3; calling toString on something that's already a string does nothing.

const test5 = ( parent.concat(name).toString() );

test5 is identical to test2, but with another redundant toString call on things that already strings.