当我将参数添加到组件的 url 后，我的本地图像无法正常工作

Question

在我将对象的 ID 添加到 url 之前，图像加载正常，但是一旦我添加了 ID，本地图像就不会加载，但是 url 图像可以工作。控制台中的一切都正常返回，它是正确的路径名。

我试过使用 require 但它给我的所有图像和一些 css.

带来了巨大的错误

我希望显示相应的图像

这是图像文件在我的数据中的样子

    img: "img/product-8.94-1.png",


 < img src={require(`../${img}`)} className="img-fluid"
                            alt="product"/>

这是路线 Link（我添加了 id）

  <Route path="/details/:id" component={Details} />
 <Link to={`/details/${id}`}>

Answer 1

可能您在您的应用程序中使用了图像的相对路径，如果您从 http://demo.com/details to http://demo.com/details/id 更改了路径路径，图像找不到正确的路径，您得到了一个额外的文件夹 details/id.

你没有显示你是如何获取图片路径的，但是如果你的图片在你的 reactjs 应用程序的资产文件夹中，那么将它像组件一样导入。

import img from "assets/image.jpg";

然后在组件中添加 img src 标签，如下所示：

<img src={img} className="img-fluid" alt="product"/>

如果您从数据库获取图像，请确保使用图像的完整路径。

My local Images Are not working Once i added parameters to the url of the component