>source

안녕하세요, 저는 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>
  </>
)
}

  • 답변 # 1

    React가 실행하기 위해 webpack-dev-server가 필요한 이유에 대한 내 답변 중 하나를 살펴보고 싶을 수도 있습니다.

    프런트 엔드가 실행 중이므로 localhost:3000 그리고 당신은 상대 경로를 제공하고 있습니다 img 태그, 브라우저는 이미지가 localhost:3000 .

    백엔드 호스트가 프런트 엔드 호스트와 다를 때마다 리소스에 대한 전체 URL을 제공해야합니다.유래( http://localhost:8000 ) + 리소스 경로 ( /book/book_sample/pride_in_nat.png )

    당신이 저장하면서리소스 경로데이터베이스에서유래그것을 주면서 img 꼬리표.

    <img src={`http://localhost:8000/${formData.store_logo}`} />
    
    

    <시간 /> 암시

    더 나은 접근 방식은 .env 파일을로드하고 development 또는 production 환경

    <img src={`${process.env.IMAGE_STORE_ORIGIN}${formData.store_logo}`} />
    
    

    그리고 당신의 .env 파일 또는 .env.development 파일, 이미지가 저장된 위치에 대한 항목을 추가 할 수 있습니다.

    당신의 .env 파일:

    IMAGE_STORE_ORIGIN=http://localhost:8000/
    
    

    따라서 백엔드 서버 오리진을 변경하려는 경우 한 위치에서 변경하면 새 서버 주소를 사용할 때마다 수동으로 변경하는 대신 전체 앱 내에서 사용됩니다.

    dotenv 및 dotenv-expand 살펴보기

    이것이 당신의 "이유"와 "무엇"을 명확히하기를 바랍니다.

  • 답변 # 2

    나는 이것이 최선의 해결책이라고 조언하고 장고와 많이 일하지 않았지만 이것을 강력히 추천 할 것입니다.

    Django를 사용하면 미디어 파일에 파일을 저장할 수 있습니다.settings.py, 내가 생각하기에 좋고 편리하지만 파일 관리에 대한 내 이해에서 가장 좋은 해결책은 cloudinary와 같은 타사를 다루는 것입니다 (파일을 관리하기 위해 타사 소프트웨어를 사용하여 Node로 작업 할 때 매우 일반적 임)

    따라서 뒤에있는 흐름 :

    cloudinary에서 계정 만들기 (완전히 무료이지만 업그레이드 할 수 있습니다.)

    파일을 DB에 저장하려면 먼저 Django와 cloudinary와 상호 작용합니다.

    Django가 완료되면 cloudinary Api는 이미지의 URL을 다시 가져옵니다.

    그런 다음 지금해야 할 일은 데이터베이스에 제공된 링크를 저장하는 것입니다.

    이제 Django 모델과 함께

    네가 가졌던 곳에영상이제 "FileField"로 안전하게 "CharField"또는 django에서 텍스트/문자열을 의미하는 것으로 변환 할 수 있습니다.

    이제 작동해야하는 React 앱에서

    Django 용 Cloudinary SDK 문서

    https://cloudinary.com/documentation/django_integration

    문서가 명확하지 않은 경우 명확성을 위해 YouTube에서 몇 가지 예를 찾아 볼 수도 있습니다.

    https://youtu.be/1T6G7Znrbfg

관련 자료

  • 이전 html - 기본 div와 바닥 글 사이의 공백
  • 다음 java - CICSCallable 스레드가 종료되지 않음