[React] img태그 src require()

의도

Narcoker_Blog Project 페이지를 만들 때 하드코딩을 하기 위해 데이터를 넣어주면
동적으로 새로운 Project Container를 생성하도록 계획했다.
String 값은 제대로 불러와졌지만 require() 안에 이미지 링크가 담긴 변수를
넣으니 이미지를 불러올 수 없었다.

해결

처음에 data.js의 project[i].images[k]에 path를 String으로 저장했는데
require(path)로 변경하고 Project.js에서 img src에 이 값을 넣어 해결했다.

초기 코드

data.js

const projects = [
    {
        name: "Project1",
        images: ['../image/logo_black.png'), '../image/profile.jpg'],
        Developer: "홍길동",
        duration: "22.00.00~",
        skills: "React",
        description: "",
    },
    {
        name: "Project2",
        images: ['../image/logo_black.png', '../image/profile.jpg'],
        Developer: "홍길동",
        duration: "22.00.00~",
        skills: "HTML",
        description: "",
    },
];
export { projects }

Project.js

import { projects } from '../projectData/data';
.
.
.
<img src={require(projects[0].images[0])} alt=""></img>
<img src={require(`${projects[0].images[0]`)} alt=""></img>
.
.
.

수정 코드

const projects = [
    {
        name: "Project1",
        images: [require('../image/logo_black.png'), require('../image/profile.jpg')],
        Developer: "홍길동",
        duration: "22.00.00~",
        skills: "React",
        description: "",
    },

    {
        name: "Project2",
        images: [require('../image/logo_black.png'), require('../image/profile.jpg')],
        Developer: "홍길동",
        duration: "22.00.00~",
        skills: "HTML",
        description: "",
    },

];
export { projects }

Project.js

import { projects } from '../projectData/data';
.
.
.
<img src={projects[0].images[0]} alt=""></img>
.
.
.