Блог

Главная - Вопросы по программированию - Как я могу отобразить значение моего изображения в виде массива из локального хранилища в функциональном компоненте?

Как я могу отобразить значение моего изображения в виде массива из локального хранилища в функциональном компоненте?

#reactjs

#reactjs

Вопрос:

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

 import React, { useState } from 'react';
import './App.css';
import Post from './Post';
    
function App() {
  const [posts, setPosts] = useState([
    {
      id: 1,
      imageUrl: require('./img/naso.jpg'),
    },
    {
      id: 2,
      imageUrl: require('./img/bimal.jpg'),
    }
  ]);

  return (
    <div>
      {posts.map((post) => (
        <Post
          key={post.id}
          imageUrl={post.imageUrl}
        />
      ))}
    </div>
  );
}

export default App;

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

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

2. Здесь нет никакого кода локального хранилища. Вы не можете требовать (‘..’) что-либо в useState исходных данных. Если вам просто нужен ImageUrl, зачем вы вызываете require ?

3. Это должно быть что-то вроде useState([ { imageUrl: '.img/naso.jpg' } ]); , а затем в вашем компоненте Post, <img src={imageUrl} />

4. братан, я попробовал это так же, как useState([ { ImageUrl: ‘.img/naso.jpg ‘ }]); но он показывает ошибку как TypeError: undefined не подлежит повторению (не удается прочитать символ свойства (Symbol.iterator))

Ответ №1:

Вам нужно импортировать изображение вверху:

     import React, { useState } from 'react';
    import './App.css';
    import Post from './Post';

function App() {
  const [posts, setPosts] = useState([
    ({
       id: 1,
      imageUrl: require('./img/naso.jpg')
    },
    {
      id: 2,
     imageUrl: require('./img/bimal.jpg'),
    })
  ];
  return (
    <div>

      {posts.map((post) => (
        <Post
          key={post.id}
          imageUrl={post.imageUrl}
        />
      ))}
    </div>
  );
}

export default App;

Удачи…

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

1. спасибо за ответ, сэр, я знал это раньше, но есть ли какой-либо другой способ без импорта ресурсов в разделе заголовка, разве мы не можем связать изображение с файлом в самом объекте массива.

2. спасибо, братан, эта крошечная недостающая скобка useState поймала меня на ошибке, в любом случае, еще раз спасибо