时间戳

首页 > 解决方案 > 如何在反应中使文件夹静态

reactjs - 如何在反应中使文件夹静态

问题描述

我正在尝试从我的文件夹中获取一张图片，其中包含我的路径引用json并将其显示在FeaturedRooms.jsx.

...
src
  components
    FeaturedRooms.jsx
  images
  pages
    Home.jsx
context.jsx
...

...
"images":[
{
"url":"../images/room-1.jpeg"
},
...

我正在使用context.jsx来处理和存储数据。

const fetchUrl = async () => {
    const resp = await fetch(url);
    const respData = await resp.json();
    const rooms = respData.rooms;
    featured(rooms);
    dispatch({ type: "ROOMS", payload: rooms });
  };
  useEffect(() => {
    fetchUrl();
  }, []);

  const featured = (rooms) => {
    let featuredRooms = rooms.filter((room) => room.room.featured === true);
    dispatch({ type: "FEATURED_ROOMS", payload: featuredRooms });
  };

我正在尝试将其显示在FeaturedRooms.jsx.

<div className="featured-wrapper">
        {featuredRooms.map((rooms) => {
          const { system, room } = rooms;
          let images = room.images.map((image) => {
            return image.url;
          });
          return (
            <div className="room" key={system.id}>
              <h2>{room.name}</h2>
              <img src={images[0]} alt="featured-rooms" />
            </div>
          );
        })}
      </div>

但它根本不起作用，有没有办法让我访问它？而且，有没有办法让我把images文件夹变成静态文件夹？也许我将从images不同的文件夹访问该文件夹。

编辑：更多细节。

标签： reactjs

解决方案

您的文件夹结构是正确的。你需要在你的阵列中做的是

...
"images":[
{
"url":require("../images/room-1.jpeg")
},
...

然后每当你想使用这个图像数组

images.map((item) =>(
   <img src={item.url} />

))

推荐阅读