【问题标题】：Correct path for img on React.jsReact.js 上 img 的正确路径
【发布时间】：2016-10-05 06:49:19
【问题描述】：

我的 react 项目中的图片有一些问题。事实上，我一直认为 src 属性的相对路径是建立在文件架构上的

这是我的文件架构：

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
...

但是我意识到路径是建立在 url 上的。在我的一个组件中（例如到 file1.jsx）我有这个：

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

如何解决这个问题？我希望在 react-router 处理的任何形式的路由中，所有图像都可以以相同的路径显示。

【问题讨论】：

直接指向图片，不要使用../whatever
您需要使用require。在 SO 上阅读此 answer 以获取更多信息。
希望这个答案能帮到你React local images

标签： javascript reactjs webpack

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果你的页面url包含多个/那么在src返回/计数减1次。

例如页面 url http://localhost:3000/play/game/ 那么src url 必须是../your-image-folder/image-name。并且您的your-image-folder 必须在public 文件夹中。

【讨论】：

【解决方案3】：

如果图片放在 'src' 文件夹中，请使用以下内容：

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

【讨论】：

这对我有用。这适用于您不想将图像存储在公共文件夹中的情况

【解决方案4】：

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

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

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

【讨论】：

动态图像，例如，在 json 文件中引用，在 create-react-app 中呢？
@zok 我想你会从 JSON 文件中导出变量，将变量导入到你的组件中。然后你可以像往常一样引用它。例如export const my_src = variable_here，从 my_file 导入 {my_src}，src={my_src}。
import './styles/style.less'; **import logo from './styles/images/deadline.png';** 在图像存在且路径正确时找不到第二行模块的错误。
这个方法也得到survive.js的确认，如果你想看看核心webpack作者的方法之一。他还提到您可以使用babel-plugin-transform-react-jsx-img-import 来避免每次引用图像时都必须导入图像。
不是这个，它只解决图像问题，但不解决路径问题。Dima Gershman 的回答是任何文件 img 或其他路径的实际反应解决方案

【解决方案5】：

在 src(/src/images) 中创建一个图像文件夹并将图像保存在其中。然后将此图像导入您的组件中（使用您的相对路径）。如下-

import imageSrc from './images/image-name.jpg';

然后在你的组件中。

<img title="my-img" src={imageSrc} alt="my-img" />
另一种方法是将图像保存在公共文件夹中并使用相对路径导入它们。为此，在公共文件夹中创建一个图像文件夹并将您的图像保存在其中。然后在您的组件中使用它，如下所示。

<img title="my-img" src='/images/my-image.jpg' alt="my-img" />

这两种方法都有效，但建议使用第一种，因为它的方式更简洁，并且图像在构建时由 webpack 处理。

【讨论】：

这对我有帮助:)
这行不通，开头需要一个斜杠（ / ）来表示相对路径，例如：“/images/pitbull-mark.png”
你试过答案中提到的那个吗？这也应该有效。
@JeremyRea 开头的斜线表示绝对路径，而不是相对路径。

【解决方案6】：

在你的组件中导入图片

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

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

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

【讨论】：

【解决方案7】：

一些较旧的答案不起作用，其他的很好但不会解释主题，总结一下：

如果图像在“公共”目录中

示例：\public\charts\a.png

在html中：

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

在 JavaScript 中：

动态地为新的img创建图像：

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

将图像设置为现有的img，id为'img1'，动态：

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

如果图片在'src'目录中：

例如：\src\logo.svg

在 JavaScript 中：

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

在 jsx 中：

<img src={logo} />

【讨论】：

【解决方案8】：

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

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

上面的 %PUBLIC_URL% 的使用将在构建过程中替换为 public 文件夹的 URL。只有 public 文件夹内的文件可以从 HTML 中引用。

与“/img/logo.png”或“logo.png”不同，“%PUBLIC_URL%/img/logo.png”可以在客户端路由和非根公共 URL 中正常工作。了解如何通过运行npm run build 来配置非根公共 URL。

【讨论】：

【解决方案9】：

如果您使用 create-react-app 创建项目，则可以访问您的公共文件夹。因此，您需要在公用文件夹中添加您的 image 文件夹。

公开/图片/

<img src="/images/logo.png" />

【讨论】：

我正要问一个问题，但这个答案解决了我的问题！！！应标记为答案。谢谢！！！ +1
它对我有用。请记住，如果您将新图像添加到公共目录，则需要重新启动应用程序。
这确实是一种处理这种情况的快速方法，但它只有在您不需要相对 URL 时才有效。例如。如果您在www.example.com/react-app 上提供您的应用程序，则公共文件夹将在www.example.com 上公开，而没有react-app。这可能很麻烦，因此接受的答案是正确的。来源：adding assets 和 using public folder

【解决方案10】：

按照官方使用说明将file-loader npm 添加到 webpack.config.js，如下所示：

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

为我工作。

【讨论】：

【解决方案11】：

create-react-app 有 public 文件夹（带有 index.html...）。如果您将“myImage.png”放在那里，例如在 img 子文件夹下，那么您可以通过以下方式访问它们：

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

【讨论】：

这应该标记为正确答案，因为它实际上是任何文件的所有类型路径的reactjs解决方案
我不明白你为什么认为这是正确的答案。我刚刚尝试了这个答案，而 Claireblani 的答案和克莱尔的答案有效，而这没有。仅当图像位于公用文件夹中时，此答案才有效。我的图像应该放在公共文件夹中吗？ @萨米
是的@Maderas第一件事是这个答案与接受的答案相同=>只需删除 {} 和基本网址，您可以简单地使用 src='/relative path of image' 或 src='absolute图像的路径'这个答案中更多的是它可以容纳任何图像的可变路径
到目前为止对我来说就像一个魅力。别的什么都没做！我几乎尝试了一切。谢谢！

【解决方案12】：

一位朋友向我展示了如何做到这一点，如下所示：

当请求图像的文件（例如，“example.js”）在文件夹树结构中与文件夹“images”处于同一级别时，

“./”有效。

【讨论】：

【解决方案13】：

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

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

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

<img src="/details/img/myImage.png" />

【讨论】：

谢谢，我会强调details 之前的/（对于可能将两者混为一谈的其他人，./details 等）。
即使对我来说它也不起作用。我正在使用 reactjs 和 cordova 并使用 ES5 作为 eslint
虽然这个和 claireablani 的解决方案都有效，但 claireablani 是 create-react-app 文档推荐的。他们列出了将资源公开facebook.github.io/create-react-app/docs/… 的许多好处
@user1322092 是对的。请记住它是/images/popcorn.png 而不是./images/popcorn.png。为我工作了所有的路线和东西。
/ 将跟随组件 url，不起作用