ReactJS 功能组件多次渲染并用props设置img src

Question

我是 ReactJS 的新手，我正在尝试将 object 作为组件传递给组件。 我从 .NET CORE WEB API 获取数据，这没有问题。 这是我的 useEffect 钩子：

 useEffect(() => { const response = axios.get("http://localhost:5122/GetUserInfo", { params: { userId: profileId } }); response.then((res) => { setUserInfo(res.data); }) }, [])

而我将userInfo state作为props传递，如下图：

 return ( <div> <ProfileCard user={userInfo} /> </div> );

为了更好地理解问题，我截取了控制台截图。 我在ProfileCard组件的顶部打印用户道具。 控制台截图

我的问题是：当我尝试使用诸如<label>{user.profilePicture}</label>之类的道具时，我可以在屏幕上看到文件名，但是当我尝试使用诸如<img src={require(./File/${user.profilePicture})} />看不到屏幕上的图像并向控制台抛出错误，基本上说找不到图像。 Note:我确信给定的源路径是正确的并且图像文件存在。

有人帮我吗？ 编辑：我还添加了控制台错误。

Answer 1

您的屏幕截图显示profilePicture是一个文件名 à la 36ddd13a-d3b9-47ad-9719-7789892a1384.jpg 。

• 只是做<img src={profilePicture} />会让您的浏览器尝试通过相对路径查找文件，这可能不起作用。
• require(...)仅适用于 React 应用程序构建时可用的资产，并且由于捆绑仅适用于 static 字符串； 来自 API 的任意文件名不会是那样。
• 如果您的 HTTP 服务器从/File下提供这些图像，那么您需要做

  <img src={`/File/${profilePicture}`} />

  （或者，如果 HTTP 服务器与您的 React 应用程序的服务来源不同，但http://localhost:5122/来自上面），

   <img src={`http://localhost:5122/File/${profilePicture}`} />

  ）。
  • 如果您正在使用例如 create-react-app，那么您需要将文件放在/public/File/目录中。

Answer 2

您不能像require(./File/${user.profilePicture})这样将动态字符串传递给require

它有时可能有效，但仅在某些边缘情况下有效。

你应该做的是告诉编译器它需要捆绑哪些文件：

const map = {
  'profilePic_1': require('./File/profilePic_1'),
  'profilePic_2': require('./File/profilePic_2'),
  // and so on...
}

通过创建 map，您可以根据服务器响应“索引”捆绑的文件。

<img src={map[user.profilePicture]} />

如果您有大量图像，我建议您动态加载它们：

const map = {
  'profilePic_1': () => import('./File/profilePic_1'),
  'profilePic_2': () => import('./File/profilePic_2'),
  // and so on...
}

const YourComponent = ({userProfilePicture})
{
  // without placeholder
  const [url, setUrl] = useState('');

  // if you want to load a placeholder from a server
  // const [url, setUrl] = useState('http://placeholder_url');

  // if you want to bundle the placeholder
  // const [url, setUrl] = useState(require('./placeholder_url'));

  useEffect(() => {
    map[userProfilePicture]().then(setUrl);
  }, []);

  return <img src={url} alt=''/>;
}

Answer 3

请您使用 useEffect 和 ProfileCard 组件发布整个组件。

useState 可能有问题。 你应该有类似的东西

const [userInfo, setUserInfo] = useState<TypeOfGetUserInfo | null>(null)

在您的 ProfileCard 中，您应该有类似的东西

const ProfileCard = React.FC<ProfileCardProps> = ({user}) => {


...

  return (
   ...something
  )
}