javascript - 이미 존재하는 이미지를 react 업데이트 형식으로 표시 한 다음 새 이미지가 업로드되면 새 이미지를 표시하려면 어떻게해야합니까?

안녕하세요, 저는 react js를 배우고 있으며 책 정보를 업데이트하는 업데이트 양식이 있습니다. 엔드 포인트에 django rest api를 사용하고 있습니다. 파일을 업로드하고 모든 작업을 수행 할 수있는 작업 양식이 있지만 템플릿에 이미있는 이미지를 표시 할 수 없습니다. 여기에 이미 데이터베이스에있는 책 표지 이미지가 있습니다. 프런트 엔드에 표시되고 이미지를 변경하면 새 이미지가 표시되어야합니다. 여기에 해당 기능을 추가하려면 어떻게해야하나요? <img src={formData.book_cover} 이를 해결하면 URL이 표시되지만 이미지가 표시되지 않습니다.

네트워크 탭에서 내가 생각하는 문제는

Request URL:http://localhost:3000/media/book/book_sample/pride_in_nat.png

URL이 다음과 같은 경우 이미지가 표시되므로 요청 URL localhost:8000 대신에 localhost:3000 장고 서버 백엔드가 실행되는 곳입니다. 그래서 어떻게 바꿀 수 있습니까?

이것은 코드입니다.

import React from "react";
function BookInfoForm() {
  const initialFormData = Object.freeze({
  id: '',
  book_cover: '',
  book_name: '',
  book_summary: '',
});
const [formData, updateFormData] = useState(initialFormData);
const [image, setImage] = useState(null);
const { register, handleSubmit, control, errors } = useForm();
useEffect(() => {
  axiosInstance.get('api/books/info/update/').then((res) => {
    updateFormData({
              ...formData,
      ['book_cover']: res.data.book_cover,
      ['book_name']: res.data.book_name,
      ['book_summary']: res.data.book_summary,
    });
  });
  }, [updateFormData]);
  const handleChange = (e) => {
    if (e.target.name === 'image') {
        setImage({
            image: e.target.files,
        });
        // console.log(e.target.files);
    } 
    updateFormData({
        ...formData,         
  // Trimming any whitespace
      [e.target.name]: e.target.value
    });
};
const onSubmit = (data) =>{
  let formData = new FormData();
  formData.append('user', user.id),
  formData.append('book_cover', data.image[0]),
  formData.append('book_name', data.book_name),
  formData.append('book_summary', data.book_summary),
  axiosInstance.put('api/books/info/update/', formData),
}
return (
  <>
    <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={2}>
            <Grid item xs={6}>
                {/* Show existing book cover and change when new one is uploaded */}
                <img src={formData.store_logo} alt="" />
                <label htmlFor="book-cover">
                    <input
                    accept="image/*"
                    className={classes.input}
                    id="book-cover"
                    onChange={handleChange}
                    name="image"
                    type="file"
                    ref={register}
                />
                    Book Cover
                    <IconButton color="primary" component="span">
                        <PhotoCamera />
                    </IconButton>
                </label>
            </Grid>
            <Grid item xs={12}>
                <TextField
                    variant="outlined"
                    required
                    fullWidth
                    id="book_name"
                    label="Book Name"
                    name="book_name"
                    autoComplete="book_name"
                    value={formData.book_name}
                    onChange={handleChange}
                    inputRef={register({maxLength: 30})}
                    rows={1}
                />
            </Grid>
            <Grid item xs={12}>
                <TextField
                    variant="outlined"
                    required
                    fullWidth
                    id="book_summary"
                    label="Book Summary"
                    name="book_summary"
                    autoComplete="book_summary"
                    value={formData.book_summary}
                    onChange={handleChange}
                    inputRef={register({maxLength: 1000})}
                    multiline
                    rows={3}
                />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Update
        </Button>
      </form>
  </>
)
}