方法 require() 不适用于映射的参考图像链接 - React

Question

我有一个包含指向本地图像链接的数组的数据文件。当我尝试映射此数组并渲染图像列表时，方法 require() 允许我仅将图像文件的名称放入内部并单独访问路径，如下面代码的 image1 所示。

即使图像源看起来与 image1 示例中的相同，Image2 和 image3 也无法工作。

为什么会这样？我可以以某种方式解决它吗？ 我不想在每次需要渲染图像列表时更正我的 src 属性。此外，通过导入获取图像并不是最好的方法，因为数组的长度可能很大，而且还可以动态变化。

感谢您的帮助和问候。

   // news.image = 'news-img1.jpg',
   // news.imageSrc = '../images/news-img1.jpg'

const NewsList = ({ newsList }) => {
   const listItems = newsList.map((news) => {
      return (
         <li key={news.id}>
            <img src={require(`../images/${news.image}`)} alt={news.title} /> // image1
            <img src={require(`${news.imageSrc}`)} alt={news.titleSrc} /> // image2
            <img src={require(news.imageSrc)} alt={news.titleSrc} /> // image3
         </li>
      )
   })
   return (
      <section className="news-list">
         <ul>
            {listItems}
         </ul>
      </section>
   );
}

export default NewsList;

Answer 1

如果我是你，我不会将我的图像包含在项目的 src 文件夹中，而是将它们放在 public/images 文件夹中。这样，就不需要 require 语句，因为 React 将直接复制图像，而不需要对名称或路径进行任何修改。

示例代码：

   // news.image = 'news-img1.jpg',
   // news.imageSrc = '../images/news-img1.jpg'

const NewsList = ({ newsList }) => {
   const listItems = newsList.map((news) => {
      return (
         <li key={news.id}>
            <img src={`${process.env.PUBLIC_URL}/images/${news.image}`} alt={news.title} /> // image1
         </li>
      )
   })
   return (
      <section className="news-list">
         <ul>
            {listItems}
         </ul>
      </section>
   );
}

export default NewsList;