Блог

Главная - Вопросы по программированию - Попытка загрузить динамический путь для изображения с помощью React useEffect и useState с node.js сервер

Попытка загрузить динамический путь для изображения с помощью React useEffect и useState с node.js сервер

#reactjs #dynamic #react-hooks #use-effect #use-state

#reactjs #динамический #реагирующие крючки #использование-эффект #use-state

Вопрос:

Я пытаюсь загрузить изображение из выборки, выполненной с сервера. Изображения сохраняются в папке ресурсов на интерфейсе. В итоге я получаю: «Ошибка: не удается загрузить модуль ‘./’ » Я предполагаю, что это связано с тем, что состояние не заполняется при попытке вернуть HTML. Когда я загружаю только имя пути, это работает, но не при попытке загрузить img? Любая помощь программисту-самоучке была бы полезна.

     export default function PlaceBids(props) {

    const [quoteImage, setQuoteImage] = useState('')
    useEffect(() => {
        fetch('/api/bids?bids='   props.quoteNumber, {
            credentials: 'same-origin',
        })
            .then(res => res.json())
            .then((res) => {
                if (res.loggedIn === false) {
                    return null
                }
                if (res.success) {
                    setQuoteImage(res.quoteImage)
                }
                else {
                    setQuoteImage(res.quoteImage)
                }
            }
            )
    }, [])

return (
   <div>
     <img src={require('../assets/models/'   quoteImage)}/>
   </div>
)
}

Комментарии:

1. Я вижу здесь две проблемы. 1) вы неправильно используете react. загрузите изображение также с помощью react js. прямо сейчас вы пытаетесь загрузить его непосредственно в HTML DOM, а не в react DOM. 2) из-за проблемы 1, когда вы завершаете вызов api и помещаете изображение в свои папки, никто не загружает изображение. получите компонент react для отображения изображения. проблема решена.

2. Привет, Джей, спасибо за твой ответ! В этом случае изображение уже сохранено в моих папках на интерфейсе, это просто путь, который загружается динамически. Похоже, что рендеринг происходит до вызова useEffect, а путь не существует.

3. верно, верно, я исправлен. я неправильно прочитал ваш вопрос. вы используете react правильно. мои извинения за то же самое. я все еще новичок в react, но, насколько я понимаю, здесь происходит два рендеринга, как обычно с react. сразу же происходит первый рендеринг, а затем происходит useeffect, вызывающий api и вызывающий изменение состояния, вызывающее второй рендеринг.

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

Ответ №1:

Это то, что я бы попробовал.

 //pass your api response to this

function ShowImage({ data }) {
    return (
        <div className="ShowImage">
          <img src={data.quoteImage} alt={"showing image here from api "}  />
        </div>
      );
}

Вот как я бы обработал простое отображение изображения в react JS. Если бы вы (или могли) поместить свой код в codesandbox или что-то в этом роде, возможно, я мог бы проверить, действительно ли это работает для вас.

по сути, поскольку я получаю полный URL-адрес изображения из API, я обхожу локальную папку.

Визуализация # 1

изображение будет отображаться, но изображения нет, поэтому он просто скажет «отображение изображения здесь в форме api».

затем useEffect вызовет API, и когда API завершится успешно, он инициирует изменение состояния и снова вызывает render, но на этот раз вы отправляете свой ответ API.

Визуализация # 2

Изображение отображается с использованием пути к изображению в data.quoteImage.

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