在React.js中正确的img路径

我在我的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，所有的图像可以显示相同的路径。

527643 次浏览
小开
最佳答案

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

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

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

< p > <代码> & lt; img src = " /细节/ img / myImage.png”/比; < /代码> < / p >
小开

在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来创建项目，那么你的公共文件夹是可访问的。所以你需要在公共文件夹中添加你的image文件夹。

公共/图像/

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

小开

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

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

小开
在create-react-app中有公共文件夹(包含index . html…)。 如果你把你的“myImage.png”放在那里，比如说在img子文件夹下，那么你可以通过:

访问它们 
<img src={window.location.origin + '/img/myImage.png'} />
小开

将file-loader npm添加到webpack.config.js的官方使用指令中，如下所示:

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

为我工作。

小开

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

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
小开
  1. 在src(/src/images)中创建一个images文件夹，并将您的图像保存在其中。然后在组件中导入此图像(使用相对路径)。像下面,

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

    然后在分量中。

    <img title="my-img" src={imageSrc} alt="my-img" />

  2. 另一种方法是将图像保存在公共文件夹中，并使用相对路径导入。为此，在公共文件夹中创建一个图像文件夹，并将图像保存在其中。然后在你的组件中像下面这样使用它。

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

    这两种方法都可以工作，但建议使用第一种方法，因为它更干净，图像在构建时由webpack处理。

小开

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

如果image在'public'目录中

例如:\public\charts\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%的使用将被public文件夹的URL取代。只有public文件夹中的文件可以从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-folder必须在public文件夹中。

小开

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

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，我使用需要指令:

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>
)
}

提交答案