Путь к изображению не работает в React, поскольку я пытался использовать путь к изображению внутри объекта, который также находится внутри массива

Question

Я хотел использовать путь изображения внутри объекта как значение. Этот объект также находится внутри массива. Но изображение не появляется. Кто-нибудь может объяснить почему? Мой код:

const Data =[
    {
        imgsrc:"{require('../src/img/2.jpg')}",
        title:'this is me',
        sname:'Dark',
        link:'https://www.google.com'
    },
    {
        imgsrc:"{require('../src/img/1.jpg')}",
        title:'this is me',
        sname:'Dark',
        link:'https://www.google.com'
    }
];

export default Data;

Answer 1

Вы не можете использовать require так, как вы предлагаете. Ну, на самом деле, конечно, есть способ, которым кто-то знает, как это может работать, но я настоятельно рекомендую не делать этого.

Рассмотрите этот вариант:

const image2 = require('../src/img/2.jpg');

const Data =[
    {
        imgsrc:image2,
        title:'this is me',
        sname:'Dark',
        link:'https://www.google.com'
    },
];

export default Data;

Answer 2

Потому что это строки, а не правильные операторы импорта? Webpack или любой другой инструмент, который вы используете, не может найти этот импорт и правильно его интерпретировать.

Попробуйте что-то вроде этого:

const image1 = require('../src/img/1.jpg')
const image2 = require('../src/img/1.jpg')
const Data =[
    {
        imgsrc:image1,
            title:'this is me',
            sname:'Dark',
            link:'https://www.google.com'
    },
    {
        imgsrc:image2,
            title:'this is me',
            sname:'Dark',
            link:'https://www.google.com'
    }`enter code here`
];