React组件中实现图片点击在新标签页打开的问题

核心问题在于你没有把require(picture)解析后的实际图片路径传递给点击事件里的openInNewTab函数，之前的url是未定义的变量，导致函数无法正常工作。

以下是具体解决步骤：

1. 获取解析后的图片URL
   require(picture)会返回构建工具处理后的图片资源路径，我们可以把这个值存为变量，方便后续使用：

   // 组件内部直接定义
   const imageUrl = require(picture);
   

   如果picture props会动态变化，用useMemo做缓存优化：

   import { useMemo } from 'react';
   
   const imageUrl = useMemo(() => require(picture), [picture]);
   

2. 绑定正确的点击事件
   将图片的src和点击事件都指向这个解析后的imageUrl：

   <img 
     src={imageUrl} 
     alt="图片描述" 
     onClick={() => openInNewTab(imageUrl)} 
     style={{ cursor: 'pointer' }} // 可选，添加鼠标指针样式提示可点击
   />
   

3. 完整组件示例

   import React, { useMemo } from 'react';
   
   const ClickableImage = ({ picture }) => {
     const openInNewTab = (url) => {
       const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
       if (newWindow) newWindow.opener = null;
     };
   
     const imageUrl = useMemo(() => require(picture), [picture]);
   
     return (
       <img 
         src={imageUrl} 
         alt="可点击图片" 
         onClick={() => openInNewTab(imageUrl)} 
         style={{ cursor: 'pointer' }}
       />
     );
   };
   
   export default ClickableImage;
   

这样修改后，点击图片时就能正确传递图片的实际路径，在新标签页打开图片了。

内容的提问来源于stack exchange，提问作者keyc9