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}`))

Pepijat ini mempunyai kaitan dengan cara pek web asas Reactrequire()函数配合使用有关。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 menggunakanrequire("../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 && }  ); }

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 menggunakancreate-react-appanda 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 ( <>   ); }

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