Bagaimana untuk menggunakan laluan dalam kaedah memerlukan dengan node.js bertindak balas?

Question

Saya cuba guna require() 方法将图片的路径粘贴到 img di dalam tag.

Inilah komponennya. Props diluluskan dengan betul daripada ibu bapa kerana console.log(img) mengembalikan laluan yang betul.

import data from '../asset/data/blog-post.json'

function BlogPostFeed() {
    const post = data.map(item => {
        return <BlogPost
            key={item.id}
            img={item.img}
        />
    })
    return (
        <>
            {post}
        </>
    )
}

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={require(img)} alt="photo" />
        </>
    )
}

Beginilah rupa fail json.

[ 
 {
        "id": 1,
        "img": "../photo/photo.jpeg"  
 }
]

Saya pasti semua laluan folder adalah betul.

Saya cuba menampal laluan 并且正在工作。但是， 或 ${img})} alt="sth"/ > Ia berjaya.

Saya juga cuba menukar fail json kepada "img": require("../photo/photo.jpeg") tetapi kemudian saya mendapat ralat fail json.

Ralat timbul找不到模块'../photo/photo.jpeg'.

Answer 1

Merujuk kepada siaran di bawah, saya menemui penyelesaian yang lebih mudah dengan menukar fail .json 文件更改为 .js. Kemudian, seperti yang dicadangkan oleh siaran itu, saya menukar data kepada:

const data = [ 
  {
    id: 1,
    img: require("../photo/photo.jpeg")  
  }
]
export default data;

Kemudian dalam komponen yang saya baru gunakan

Bagaimana untuk menggunakan literal templat dalam memerlukan? (memerlukan(`${somePath}`))

Answer 2

Pepijat ini mempunyai kaitan dengan cara pek web asas React require() 函数配合使用有关。 require() 不是标准的 JavaScript 函数，而是 Node.js 和 webpack 提供的功能。 require() melaksanakan bacaan segerak modul semasa proses binaan, bermakna pek web perlu mengetahui kebergantungan antara modul pada masa binaan (sebelum apl berjalan) dan bukannya pada masa jalan.

Jadi apabila anda menggunakan require("../photo/photo.jpeg") 时，webpack 知道将此文件包含在构建包中，因为路径是静态的，而不是动态的。但是，当您尝试使用 require(img) secara langsung, webpack tidak tahu tentang fail yang anda rujuk sehingga kod berjalan, tetapi sudah terlambat.

Dalam kes ini saya mencadangkan dua penyelesaian yang mungkin:

1. Gunakan import dinamik:

Ini ialah ciri yang disediakan oleh JavaScript moden dan pek web juga menyokongnya. Begini cara anda menggunakannya dalam komponen anda:

import React, { useState, useEffect } from 'react';

function BlogPost(props) {
    const { img } = props;
    const [imgSrc, setImgSrc] = useState();

    useEffect(() => {
        import(`../${img}`)
        .then((image) => setImgSrc(image.default))
        .catch((err) => console.error(err));
    }, [img]);

    return (
        <>
            {imgSrc && <img src={imgSrc} alt="photo" />}
        </>
    );
}

Sila ambil perhatian bahawa anda perlu menyediakan laluan relatif kepada akar projek dalam fail JSON agar ini berfungsi dengan betul.

1. Layankan imej menggunakan folder awam: Jika anda menggunakan create-react-app anda boleh meletakkan imej ke dalam folder awam. Anda kemudiannya boleh merujuk imej ini melalui laluan yang berkaitan dengan folder awam:

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={process.env.PUBLIC_URL + '/photo/photo.jpeg'} alt="photo" />
        </>
    );
}

Sila ambil perhatian bahawa dalam fail JSON anda hanya perlu menyediakan laluan ke direktori awam.