Method require（）不适用于映射的参考图像链接-React

Question

我有一个数据文件，其中包含带有本地图像链接的数组。当我尝试映射此数组并渲染图像列表时，方法require（）允许我仅将图像文件名和访问路径单独放在内部，就像下面的代码image1一样。

Image2，即使图像源似乎与image1示例中的图像源相同，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;