>source

Hello Community 저는 ​​React JS를 처음 접하는 어느 시점에서 막혔습니다. 지도 기능을 사용하여 이미지 파일을 호출하고 싶습니다. 이미지만 웹페이지에 나타나지 않습니다.

여기 내 Array.jsx 파일이 있습니다.

const PhotoData= [
        {
            imgsrc: gallery_1
        },
        {
            imgsrc: gallery_4
        },
        {
            imgsrc: gallery_7
        },
        {
            imgsrc: gallery_10
        }
    ]
    const PhotoData1= [
        {
            imgsrc: gallery_2
        },
        {
            imgsrc: gallery_6
        },
        {
            imgsrc: gallery_8
        },
        {
            imgsrc: gallery_12
        }
    ]
    const PhotoData2= [
        {
            imgsrc: gallery_3
        },
        {
            imgsrc: gallery_5
        },
        {
            imgsrc: gallery_9
        },
        {
            imgsrc: gallery_11
        }
    ]
    export default [PhotoData,PhotoData1,PhotoData2];

또한 code 위의 갤러리 이미지를 가져옵니다.

여기에 내가 code를 작성하는 photos.jsx 파일이 있습니다.

<div className='photo__header-grid'>                <div className='grid-item'>                    {
                        PhotoData.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>                                    <img src={val.imgsrc} alt="gallery_1"/>                                </div>                            )
                        })
                    }
                </div>            </div>            <div className='photo__header-grid-1'>                <div className='grid-item'>                {
                        PhotoData1.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>                                    <img src={val.imgsrc} alt="gallery_1"/>                                </div>                            )
                        })
                    }
                </div>            </div>            <div className='photo__header-grid-2'>                <div className='grid-item'>                    {
                        PhotoData2.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>                                    <img src={val.imgsrc} alt="gallery_1"/>                                </div>                                )
                            })
                    }
                </div>            </div>

웹 페이지에 이미지가 표시되지 않습니다. 미리 감사드립니다.

배열과 함께 파일을 가져오는 방법을 보여 주시겠습니까?

VersifiXion2022-02-05 23:18:17

데이터 세트의 단일 src가 있는 단일 img 태그를 수동으로 추가하면 작동합니까?

Will Jenkins2022-02-05 23:18:17

src와 같은 이미지 경로는 예를 들어 gallery_12입니다. 브라우저에서 이미지를 렌더링하는 경로가 아닙니다. /gallery_12.jpg 또는 images/gallery_12.png 등과 같은 브라우저에 대해 의미 있는 경로를 사용해야 합니다. 요점이 무엇입니까?

Emre Doğan2022-02-05 23:18:17

당신은 code샌드박스를 추가할 수 있습니까?

Takashi Anji2022-02-05 23:18:17

이 질문에 답변해 주셔서 감사합니다. 이제 내 배열 파일 photos.jsx 파일의 일부 변경으로 문제가 해결되었습니다.

Bhavik Sejpal2022-02-05 23:18:17
  • 이전 node.js : 노드 js가 있는 POST 요청은 항상 "grant_type 매개변수 누락"을 반환합니다.
  • 다음 Pandas를 사용하지 않고 Python에서 행별로 CSV 파일을 편집하는 방법