Подскажите по изображениям react js +

Question

Подскажите по изображениям react js +

☀︎Питруха☀︎ Мастер (1789), на голосовании 2 месяца назад

У меня есть блок в котором в котором есть несколько инпутов и поля под картинки. по нажатию кнопки этот блок появляется и в инпуты загружается информация и бд, а так же загружаются картинки. картинки котороые можно изменить загружаются из файлов на сервере. При первой загрузке картинки грузятся правильно, но вот стоит изменить эти картинки (загружаются через инпуты) так эти картинки перестают загружаться(обновляться) вместо них загружены старые - те что появились при первой загрузке блока. Как решить эту проблему? Картинки загружаю вот этим кодом:

     let imagePath = process.env.PUBLIC_URL + '/images/' + ab['cn']['ID'] + '-0.jpeg';  
    setFile_0(imagePath);

Дополнен 3 месяца назад

файлы меняются а картинки те же остаются, хотя код срабатывает

Answer 1

V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (267352) 3 месяца назад

react имеет механизм принудительного обновления, даже если путь к файлу не изменился, благодаря атрибуту key (на ванильном js такое не работает):

useEffect(() => {
const imagePath = process.env.PUBLIC_URL + '/images/' + ab['cn']['ID'] + '-0.jpeg';
setFile_0(imagePath);
}, [/* зависимости, которые вызывают обновление изображения */]);

return (
<img src={file_0} alt="Some Image" key={file_0} />
);

Можно просто попробовать присобачить timestamp к имени:
let imagePath = process.env.PUBLIC_URL + '/images/' + ab['cn']['ID'] + '-0.jpeg' + '?t=' + new Date().getTime();
setFile_0(imagePath);

☀︎Питруха☀︎Мастер (1789) 3 месяца назад

этот useEffect один раз только выполняется во время загрузки страницы, а как сделать чтобы он срабатывал во время выполнения функции?

☀︎Питруха☀︎Мастер (1789) 3 месяца назад

useEffect у меня срабатывает каждый раз во время рендеринга, но это ничего не дает результат тот же. я написал код без зависимостей.

V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (267352) если без зависимости срабатывает... То можно проверить ручной вариант с кнопкой, а затем переделать его на триггерить откуда надо:

 import React, { useState, useEffect } from 'react'; 
 
function MyComponent() { 
  const [file_0, setFile_0] = useState(''); 
 
  const updateImagePath = () => { 
    const imagePath = process.env.PUBLIC_URL + '/images/' + ab['cn']['ID'] + '-0.jpeg';  
    setFile_0(imagePath); 
  }; 
 
  useEffect(() => { 
    updateImagePath(); 
  }, []);
 
  return ( 
     
       
      {/* Кнопка для ручного обновления изображения */} 
       
     
  ); 
} 
 
export default MyComponent;

☀︎Питруха☀︎Мастер (1789) 3 месяца назад

попробую снести этот img и создать новый