您使用的是相对url，相对于当前url，而不是文件系统。你可以通过使用绝对url来解决这个问题

<img src ="http://localhost:3000/details/img/myImage.png" />

但是当您部署到www.my-domain.bike或任何其他站点时，这不是很好。更好的方法是使用相对于站点根目录的url

<img src=“/细节/img/myImage.png”/>

在create-react-app中，图像的相对路径似乎不起作用。相反，你可以导入一个图像:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

如果你使用create-react-app来创建项目，那么你的公共文件夹是可访问的。所以你需要在公共文件夹中添加你的图像文件夹。

公共/图像/

<img src=“/images/logo.png” />

一位朋友向我展示了如何做到这一点:

"．当请求图像的文件(例如，"example.js")在文件夹树结构中与文件夹"images"在同一层时，/"工作。

在create-react-app中有一个公共文件夹(index.html…) 如果你把“myImage.png”放在img子文件夹下，你可以通过以下方式访问:

<img src={window.location.origin + '/img/myImage.png'} />

根据webpack.config.js的官方使用指令，添加文件加载器npm，如下所示:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

为我工作。

如果图像放在src文件夹中，请使用以下方法:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

Make an images folder inside src(/src/images) And keep your image in it. Then import this image in your component(use your relative path). Like below- import imageSrc from './images/image-name.jpg'; And then in your component. <img title="my-img" src={imageSrc} alt="my-img" /> Another way is to keep images in public folder and import them using relative path. For this make an image folder in public folder and keep your image in it. And then in your component use it like below. <img title="my-img" src='/images/my-image.jpg' alt="my-img" /> Both method work but first one is recommended because its cleaner way and images are handled by webpack during build time.

有些老答案行不通，有些答案不错，但不能解释主题，总结如下:

如果image在'public'目录中

例如:\ \ \ a.png图表

在html中:

<img id="imglogo" src="/charts/logo.svg" />

在JavaScript中:

动态地在新img中创建图像:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

动态设置image为现有的img, id为'img1':

document.getElementById('img1').src = 'charts/a.png';

如果image在'src'目录下:

例如:\ src \ logo.svg

在JavaScript中:

import logo from './logo.svg';  
img1.src = logo;  

在jsx:

<img src={logo} /> 

将logo放在公共文件夹中，例如public/img/logo.png，然后引用公共文件夹为%PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

在构建过程中，上面的%PUBLIC_URL%的使用将被公用文件夹的URL取代。只有公共文件夹中的文件才能从HTML中引用。

与"/img/logo.png"或"logo.png"不同，"%PUBLIC_URL%/img/logo.png"将正确地用于客户端路由和非根公共URL。学习如何通过运行npm run build配置一个非根公共URL。

在组件中导入图像

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

并在image src={RecentProjectImage_3}上调用图像名称作为对象

 <Img src={RecentProjectImage_3} alt="" />

如果你的页面url包含多个/，那么在src中返回/ count - 1次。

例如页面url http://localhost:3000/play/game/，那么src url必须是../your-image-folder/image-name。你的your-image文件夹必须在公共文件夹中。

我用过这种方法，效果很好

import Product from "../../images/product-icon.png";
import { Icon } from "@material-ui/core";

<Icon>
    <img src={Product} style={{ width: "21px", height: "24px" }} />
</Icon>

我用create-react-app创建了我的应用程序，如果我想动态改变我的image src，我使用require指令:

export const MyComponent = () => {
  const [myImg, setMyImg] = useState(require('./path/to/my/img'));

  const handleClick = () => {
    setMyImg(require('./path/to/other/img'));
  }

  return (
    <div>
      <img src={myImg} alt='myImg' />
      <button onClick={handleClick}>Click me!<button/>
    <div>
  )
}