Reactjs 데이터 변경, 파일 이름이 동일하게 유지됨

Question

내 서버에 picture.profile.jpg이 있습니다. 새 사진을 업로드 할 때 picture.jpg를 데이터가 아닌 이름으로 바꾸십시오 (즉, 이전 profile.jpg는 새 profile.jpg로 바뀌지 만 새 프로필은 profile.jpg라고도 함). 내 약속이 반환 된 후에 forceUpdate를 호출하지만 이미지의 실제 URL (src)을 변경하지 않으면이 작업이 수행되지 않습니다. (다시 올바른 URL에 "빈"에, 올바른 URL에서) 내가 URL이 변경되는 것을 인식 할 것이다 반응 순서로 약속을 연결하려고 시도하는 내 코드를 참조하십시오 : 대한

fetch('http://localhost:3000/change_pet_pic/?petID='+this.props.pet.id+'&userID='+this.props.pet.ownerID, { method: 'POST', body: form }) 
     .then(function(res) { 
      return res.json(); 
     }).then(function(json) { 
      var pet = $this.props.pet; 
      pet.petPicture = "empty"; 
      $this.props.pet=pet; 
      $this.forceUpdate(); 

      return json.picture_url; 

     }).then(function(url){ 
      var pet = $this.props.pet; 
      pet.petPicture = url; 
      $this.props.pet=pet; 

      $this.forceUpdate(); 
     }) 

감사를 당신의 팁!

Answer 1

ReactJS 코드에 아무런 문제가없는 것 같지만 브라우저 캐시이되어야합니다. 이미지 URL이 동일하게 보일 때마다 항상 이전 이미지를 반환하여 문제의 원인이됩니다.

이 문제를 해결하려면 이미지가 변경 될 때마다 다른 쿼리 문자열을 사용하여 이미지에 액세스 할 수 있습니다.

처음으로 profile.jpg?v=1으로 액세스 할 수 있으며 두 번째로 profile.jpg?v=2과 같은 형식으로 액세스 할 수 있습니다.