Как правильно импортировать изображения в массив в React
У меня есть несколько изображений в папке проекта, и я хочу использовать их относительные ссылки, чтобы показать их в каждом соответствующем элементе массива.
Я хочу в конечном итоге использовать изображение в компоненте реагирования, чтобы показать изображение на моей веб-странице.
Структура файла
- источник
- ресурсы
- данные
- проект.js
- ProjectImages.js
- изображений
- img.jpg
- img2.jpg
- img3.jpg
- данные
- компоненты
- Проект.jsx
- ресурсы
Проект.jsx
export default function Project({ project, theme }) {
return (
<div id = "project">
<h3 className = "subheading">{project.name}</h3>
<div>
<img src = {project.img}>
</div>
</div>
);
}
проект.js
// import projectImages from '../data/projectImages' (tried to import an array of img)
module.exports = [
{
type: "",
name: "",
desc: "",
tech: ["", "", "", ""],
summary: "",
year: ,
img: '../data/images/img.jpg', // tried projectImages[0]
link: "",
},
{
...
img: '../data/images/img2.jpg', // tried projectImages[1]
...
},
{
...
img: '../data/images/img3.jpg', // tried projectImages[2]
...
},
Я пытался import img from '../data/projectImages/img.jpg, но переменная не была принята в массив объектов.
Я также пытался поместить изображения в массив и использовать его для ссылки на них, но это тоже не сработало.
Ответ на этот вопрос зависит от используемой вами системы сборки. create-react-app? vite? Что-то другое?
@spender Я использую create-react-app
@Mr.Polywhirl Не могли бы вы привести мне пример того, как будет выглядеть манифест JSON в контексте моего приложения? Мне трудно разобраться в ресурсах в Интернете.
Веб-пакет @Mr.Polywhirl действительно поддерживает такой сценарий
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы используете create-react-app, который использует webpack за кулисами.
Прошло много времени с тех пор, как я это делал, но я считаю, что вы можете сделать что-то вроде:
const myRequireContext = require.context('./someDir', false, /\.jpg$/);
который даст вам объект, который выглядит примерно так:
{
"./img.jpg": "some/path",
"./img2.jpg": "some/otherPath",
"./img3.jpg": "some/yetAnotherPath"
}
(это не в моей голове, поэтому детали могут немного отличаться)
См. https://webpack.js.org/guides/dependent-management/#require-with-expression
Спасибо, это сработало! Я использовал const myRequireContext = require.context('../images', false, /\.jpg$/); на верхнем уровне моего файла project.js и img: myRequireContext('./img.jpg') в массиве объектов.
Непосредственно внутри вашего массива используйте require()
module.exports = [
{
type: "",
name: "",
desc: "",
tech: ["", "", "", ""],
summary: "",
year: ,
img: require('../data/images/img.jpg'),
link: "",
},
{
...
img: require('../data/images/img2.jpg'),
...
},
{
...
img: require("'../data/images/img3.jpg",
...
},
Я считаю, что вам понадобится манифест JSON/YAML, в котором перечислены все ресурсы по их именам, чтобы вы могли динамически ссылаться на их пути. React не понимает, как работает каталог, например ваша файловая система. Если бы это был Node-сервер, вы могли бы перечислить файлы в каталоге, но поскольку React — это клиентское приложение, он не может знать, как выглядит система, пока вы ему не сообщите.