图像路径在 React 中不起作用，因为我尝试在 object 中使用图像路径，它也在数组内部

Question

I wanted to use image path inside an object as a value. This object is also inside of an array. But the image is not showing up. Can anyone explain why? My code:

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

Because this are strings, not proper import statements? Webpack or whatever tool you are using is unable to find this imports and interpret them correctly.

Try something like this:

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`
];

Answer 2

You cannot use require in the way you are proposing. Well, actually of course there is a way someone know how it can work, but I would highly recommend to not do it.

Consider this option:

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;