blocks|key|4411958|text|您使用的是相对url，它相对于当前的url，而不是文件系统。您可以使用绝对urls来解决此问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4411959|<img+src+="http://localhost:3000/details/img/myImage.png"+/>|offset|length|style|CODE|4411960|但是，当您部署到www.my-domain.bike或任何其他站点时，这并不是很好。最好是使用相对于站点根目录的url。|4411961|<img+src="/details/img/myImage.png"+/>|4411962|entityMap^0|0|0|1O|0|0|0|12|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

You're using a relative url, which is relative to the current url, not the file system. You could resolve this by using absolute urls

<code>&lt;img src ="http://localhost:3000/details/img/myImage.png" /&gt;
</code>

But that's not great for when you deploy to www.my-domain.bike, or any other site. Better would be to use a url relative to the root directory of the site

<code>&lt;img src="/details/img/myImage.png" /&gt;
</code>

blocks|key|4411983|text|在create-react-app中，图像的相对路径似乎不起作用。相反，您可以导入图像：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4411984|import+logo+from+'./logo.png'+//+relative+path+to+image+

class+Nav+extends+Component+{+
++++render()+{+
++++++++return+(+
++++++++++++<img+src={logo}+alt={"logo"}/>+
++++++++)++
++++}
}|code-block|syntax|javascript|4411985|entityMap^0|1|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In <code>create-react-app</code> relative paths for images don't seem to work. Instead, you can import an image:
<pre><code>import logo from './logo.png' // relative path to image 

class Nav extends Component { 
 render() { 
 return ( 
 &lt;img src={logo} alt={&quot;logo&quot;}/&gt; 
 ) 
 }
}
</code></pre>

blocks|key|4412223|text|如果图像放在'src‘文件夹中，请使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412224|<img+src={require('../logo.png')}+alt="logo"+className="brand-logo"/>|code-block|syntax|javascript|4412225|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If the image is placed inside the 'src' folder, use the following:
<pre><code>&lt;img src={require('../logo.png')} alt=&quot;logo&quot; className=&quot;brand-logo&quot;/&gt;
</code></pre>

blocks|key|4412253|text|一些旧的答案不起作用，其他的很好，但不能解释主题，总结如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412254|如果图像在'public‘目录中|4412255|示例：\public\charts\a.png|offset|length|style|CODE|4412256|在html中：|4412257|<img+id="imglogo"+src="/charts/logo.svg"+/>|code-block|syntax|javascript|4412258|在JavaScript中：|4412259|动态创建镜像到新的img：|4412260|var+img1+=+document.createElement("img");++
img1.src+=+'charts/a.png';++|4412261|将image动态设置为现有img，id为'img1‘：|4412262|document.getElementById('img1').src+=+'charts/a.png';|4412263|如果图像在'src‘目录中：|4412264|示例：\src\logo.svg|4412265|4412266|import+logo+from+'./logo.svg';++
img1.src+=+logo;++|4412267|在jsx中：|4412268|<img+src={logo}+/>+|4412269|entityMap^0|0|0|3|K|0|0|0|0|0|0|0|0|0|3|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1F|8|@$F|1G|G|1H|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1K|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|V|5|N|7|1M|8|@]|9|@]|A|$O|P]]|$1|W|3|X|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|N|7|1O|8|@]|9|@]|A|$O|P]]|$1|10|3|11|5|6|7|1P|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1Q|8|@$F|1R|G|1S|H|I]]|9|@]|A|$]]|$1|14|3|R|5|6|7|1T|8|@]|9|@]|A|$]]|$1|15|3|16|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|17|3|18|5|6|7|1V|8|@]|9|@]|A|$]]|$1|19|3|1A|5|N|7|1W|8|@]|9|@]|A|$O|P]]|$1|1B|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|1C|$]]

Some older answers din't work, others are good but won't explain the theme, in summary:

<h1>If image is in 'public' directory</h1>

Example: <code>\public\charts\a.png</code> 

In html:

<pre><code>&lt;img id="imglogo" src="/charts/logo.svg" /&gt;
</code></pre>

In JavaScript: 

Create image to new img, dynamically: 

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

Set image to existing img with id as 'img1', dynamically: 

<pre><code>document.getElementById('img1').src = 'charts/a.png';
</code></pre>

<h1>If image is in 'src' directory:</h1>

Example: <code>\src\logo.svg</code> 

In JavaScript: 

<pre><code>import logo from './logo.svg'; 
img1.src = logo; 
</code></pre>

In jsx:

<pre><code>&lt;img src={logo} /&gt; 
</code></pre>

blocks|key|4412191|text|根据官方使用说明将file-loader+npm添加到webpack.config.js中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4412192|config.module.rules.push(
++++{
++++++++test:+/\.(png%7Cjpg%7Cgif)$/,
++++++++use:+[
++++++++++++{
++++++++++++++++loader:+'file-loader',
++++++++++++++++options:+{}
++++++++++++}
++++++++]
++++}
);|code-block|syntax|javascript|4412193|对我很管用。|4412194|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/file-loader^0|9|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Adding <a href="https://www.npmjs.com/package/file-loader" rel="noreferrer">file-loader npm</a> to webpack.config.js per its official usage instruction like so:

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

worked for me.

blocks|key|4412133|text|我的一个朋友告诉我怎么做，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412134|​|4412135|当请求图像的文件(例如，"example.js")在文件夹树结构中与文件夹“图像”处于同一级别时，"./“起作用。|4412136|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

A friend showed me how to do this as follows:



"./" works when the file requesting the image (e.g., "example.js") is on the same level within the folder tree structure as the folder "images".

blocks|key|4412249|text|我以这种方式使用它，它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412250|import+Product+from+"../../images/product-icon.png";
import+{+Icon+}+from+"@material-ui/core";

<Icon>
++++<img+src={Product}+style={{+width:+"21px",+height:+"24px"+}}+/>
</Icon>|code-block|syntax|javascript|4412251|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have used it this way and it worked perfectly
<pre><code>import Product from &quot;../../images/product-icon.png&quot;;
import { Icon } from &quot;@material-ui/core&quot;;

&lt;Icon&gt;
 &lt;img src={Product} style={{ width: &quot;21px&quot;, height: &quot;24px&quot; }} /&gt;
&lt;/Icon&gt;
</code></pre>

blocks|key|4412188|text|将徽标放在公用文件夹中，例如public/img/logo.png下，然后将公用文件夹称为%25PUBLIC_URL%25：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412189|<img+src="%25PUBLIC_URL%25/img/logo.png"/>|code-block|syntax|javascript|4412190|在构建过程中，上面使用的%25PUBLIC_URL%25将被替换为public文件夹的URL。只有public文件夹中的文件才能从HTML中引用。|offset|length|style|CODE|4412191|与"/img/logo.png“或"logo.png”不同，"%25+public+_URL%25/img/logo.png“可以正确处理客户端路由和非根公共URL。了解如何通过运行npm+run+build配置非根公共URL。|4412192|entityMap^0|0|0|T|6|19|6|0|2F|D|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@$I|Y|J|Z|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

Place the logo in your public folder under e.g. public/img/logo.png and then refer to the public folder as %PUBLIC_URL%:

<pre><code>&lt;img src="%PUBLIC_URL%/img/logo.png"/&gt;
</code></pre>

The use of %PUBLIC_URL% in the above will be replaced with the URL of the <code>public</code> folder during the build. Only files inside the <code>public</code> folder can be referenced from the HTML.

Unlike "/img/logo.png" or "logo.png", "%PUBLIC_URL%/img/logo.png" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running <code>npm run build</code>.

blocks|key|4412204|text|如果您的页面url包含多个/，则在src中返回/计数减1次。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4412205|例如，页面url必须为http://localhost:3000/play/game/，然后src+url必须为../your-image-folder/image-name。并且您的your-image-folder必须在public文件夹中。|4412206|entityMap^0|H|3|N|1|0|B|W|1A|3|1K|V|2K|H|34|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|I|$]]

If your page url contains multiple / then in <code>src</code> go back <code>/</code> count minus 1 times.
For example page url <code>http://localhost:3000/play/game/</code> then <code>src</code> url must be <code>../your-image-folder/image-name</code>. And your <code>your-image-folder</code> must be in <code>public</code> folder.

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture

Here my files architecture:

<pre><code>components
 file1.jsx
 file2.jsx
 file3.jsx
container
img
js 
... 
</code></pre>

However I realized that the path is built on the url. In one of my component (for example into file1.jsx) I have this:

<pre><code>localhost/details/2
&lt;img src="../img/myImage.png" /&gt; -&gt; works

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

How is it possible to solve this problem? I want that in any form of routes handled by react-router, all images can be displayed with the same path.

Correct path for img on React.js

我对我的react项目中的图片有一些问题。实际上，我一直认为src属性的相对路径是建立在文件体系结构上的下面是我的文件架构：components    file1.jsx    file2.jsx    file3.jsxcontainerimgjs ... 然而，我意识到路径是建立在url上的。在我的一个组件中(例如，在file1.jsx中)，我有以下内容：localhost/details/2

问img在React.js上的正确路径
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问img在React.js上的正确路径EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问img在React.js上的正确路径
EN