在React中，尝试根据传递给url的In显示不同的图像。

在React中，可以根据传递给URL的参数来显示不同的图像。实现这个功能的一种常见方法是使用React Router库来处理URL路由，并在组件中根据URL参数来决定要显示的图像。

首先，需要安装React Router库。可以使用以下命令来安装：

npm install react-router-dom

接下来，在应用的根组件中，使用BrowserRouter组件来包裹整个应用，并定义不同的路由。例如，可以定义一个路由来匹配以/image/:id开头的URL，并将:id作为参数传递给组件。

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import ImageComponent from './ImageComponent';

function App() {
  return (
    <Router>
      <Route path="/image/:id" component={ImageComponent} />
    </Router>
  );
}

export default App;

然后，在ImageComponent组件中，可以通过props.match.params.id来获取URL参数，并根据参数的值来决定要显示的图像。

import React from 'react';

function ImageComponent(props) {
  const { id } = props.match.params;

  let imageUrl = '';

  if (id === '1') {
    imageUrl = 'https://example.com/image1.jpg';
  } else if (id === '2') {
    imageUrl = 'https://example.com/image2.jpg';
  } else {
    imageUrl = 'https://example.com/default.jpg';
  }

  return <img src={imageUrl} alt="Image" />;
}

export default ImageComponent;

在上面的示例中，如果URL参数为1，则显示image1.jpg的图像；如果URL参数为2，则显示image2.jpg的图像；否则，显示默认的图像default.jpg。

这是一个简单的示例，可以根据实际需求进行扩展和优化。在实际开发中，可以使用更复杂的路由配置和组件结构来实现更多功能。

腾讯云相关产品推荐：如果需要在React应用中存储和管理图像，可以使用腾讯云的对象存储服务 COS（Cloud Object Storage）。COS提供了高可靠、低成本的对象存储解决方案，适用于各种规模的应用场景。您可以通过以下链接了解更多关于腾讯云COS的信息：

腾讯云COS产品介绍：https://cloud.tencent.com/product/cos