如何在React中引用本地图像?

你需要在{}中包装你的图像源路径

<img src={'path/to/one.jpeg'} />

如果使用webpack，则需要使用require

<img src={require('path/to/one.jpeg')} />

首先，在{}中包装src

如果使用Webpack; 而不是: <img src={"./logo.jpeg"} /> < / p >

你可能需要使用require:

<img src={require('./logo.jpeg')} />

另一种选择是首先导入图像:

import logo from './logo.jpeg'; // with import

还是……

const logo = require('./logo.jpeg); // with require

然后插上电源……

<img src={logo} />

我推荐这个选项，特别是在重用映像源的情况下。

最好的方法是先导入映像，然后再使用它。

import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
render() {
return (
<div className="row">
<div className="logo">
<img src={logo} width="100" height="50" />
</div>
</div>
);
}
}

import image from './img/one.jpg';


class Icons extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
export default Icons;

导入图像的最佳方式是…

import React, { Component } from 'react';


// image import
import CartIcon from '../images/CartIcon.png';


class App extends Component {
render() {
return (
<div>
//Call image in source like this
<img src={CartIcon}/>
</div>
);
}
}

我用过这种方法，它很有效……希望你有用。

const logofooter = require('../../project-files/images/logo.png');


return(
<div className="blockquote text-center">
<img src={logofooter} width="100" height="80" />
<div/>
);

import React from "react";
import image from './img/one.jpg';


class Image extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}

导出默认镜像

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

或

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

没有包装，但这也是不同的应用。

我也检查了“导入”解决方案，在少数情况下它是有效的(这并不奇怪，这是应用在React中的App.js模式中)，但不是在我上面的情况下。

在公共文件夹中创建一个资产文件夹，并相应地放置图像路径。

<img className="img-fluid"
src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`}
alt="logo"/>

正如一些人在评论中提到的，你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释

我找到了另一种方法来实现这个(这是一个功能组件):

const Image = ({icon}) => {
const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
return <Img />
}

希望能有所帮助!

有两种方法。

第一个

在类的顶部导入图像，然后像这样在<img/>元素中引用它

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';


export default class HelloImage extends Component {
render() {
return <img src={myImg} width="100" height="50" />
}
} 

第二个

你可以像这样在<img/>元素中使用require('../pathToImh/img')直接指定图像路径

import React, { Component } from 'react';


export default class HelloImage extends Component {
render() {
return <img src={require(../path/myImg.svg)} width="100" height="50" />
}
}

步骤1:import MyIcon from './img/icon.png'

第二步:

<img
src={MyIcon}
style=\{\{width:'100%', height:'100%'}}
/>

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

1. 你把“complete -爬行动物。jpg”;在公用文件夹中，然后您可以访问它为

src={'/completative-reptile.jpg'}

2. 你把completative-reptile.jpg放在public/static/images，然后你可以访问它作为

src={'/static/images/completative-reptile.jpg'}

对于那些想要使用多个图像的人来说，一个一个地导入它们将是一个问题。解决方案是将images文件夹移动到公共文件夹。如果你有一张图片在public/images/logo.jpg，你可以这样显示这个图片:

function Header() {
return (
<div>
<img src="images/logo.jpg" alt="logo"/>
</div>
);
}

是的，不需要在源代码中使用/public/。

进一步阅读:https://daveceddia.com/react-image-tag/。

首先，您必须导入图像

import logo from './logo.jpeg'; // with import

然后插上电源……

<img src={logo} />

就是这样。

你可以创建一个名为实例images.js的文件，并引用其中所有的应用资源，然后将该组件导入到其他需要显示图像的组件中

你需要使用require和。默认的

 <img src={require('./logo.jpeg').default} />

我想导入多个图像并将它们传递给不同的组件。结果证明，我只需要一次导入多个图像，并且可以通过传递道具在任何组件中使用它们。

import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';

让我们创建一个对象。

dog = [
{ name: "Whiskey", src: whiskey },
// ...
]

然后显示图像

<img src={dog.src}></img>

为了让require方法工作，我必须添加".default"，就像这样:

<img src={require('./path/to/image.svg').default} />

我也遇到了同样的问题，经过研究，我通过将JSON数据放在JS中的常量中来解决这个问题，这样我就可以导入图像，并且只通知JSON对象中的导入。例子:

import imageImport from './image.png';


export const example = [
{
"name": "example",
"image": imageImport
}
]

<Image source={example.image}/>

好吧，你们现在都知道这个问题的答案了，但我把这个问题的答案贴出来，大多数人在阅读其他答案后可能会想知道:

问:我怎么才能导入50或100个文件:)

我实际上刚刚遇到了同样的问题，如果你将你的图像文件从./public目录移动到./src目录，你可以导入或要求，两者都将呈现。

我还用组件中的image和src属性进行了测试，它们都可以工作。

在我尝试使用../来指示jpg文件所在的确切文件夹后，我得到了一个可用的错误，允许我进行简单的修复。

如果你不想把你的图片放在公共文件夹中，请使用下面的语法

 src={require("../../assets/images/img_envelope.svg").default}