Question

如何从本地目录加载图片并将其包含在reactjs img src标记？

中

我在与我的组件相同的文件夹中有一个名为one.jpeg的图片，我在我的<img src="one.jpeg" />函数中尝试了<img src={"one.jpeg"} />和render，但图片没有显示。此外，由于项目是使用官方webpack config命令行util创建的，因此我无法访问create-react-app文件。

更新：如果我首先使用import img from './one.jpeg'导入图像并在img src={img}内使用它，这是有效的，但我要导入很多图像文件，因此，我想在表单中使用它们， img src={'image_name.jpeg'}。

Answer 1

首先将{s}放在{}

中

然后如果使用Webpack; 代替： <img src={"./logo.jpeg"} />

您可能需要使用require：

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

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

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

或......

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

然后将其插入...

<img src={logo} />

我建议您使用此选项，尤其是在您重复使用图片来源时。

Answer 2

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

return

Answer 3

将您的图像放在公用文件夹中或在您的公用文件夹中创建一个子文件夹并将您的图像放在那里。例如：

你把“completive-reptile.jpg”放在公共文件夹，然后你就可以访问它

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

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

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

Answer 4

navigator.cookieEnabled

Answer 5

您需要在{}

中包装图像源路径

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

如果使用require

，则需要使用webpack

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

Answer 6

导入图像的最佳方法是...

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

Answer 7

在 public 文件夹中，创建一个 assets 文件夹，并相应地放置图像路径。

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

Answer 8

您有两种方法可以做到。

第一

将图像导入类的顶部，然后像这样在您的<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" /> 
  }
}

第二

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

import React, { Component } from 'react'; 

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

Answer 9

对于想要使用多个图像的人来说，当然一张一张地导入它们会是一个问题。解决方法是将images文件夹移动到public文件夹。因此，如果您在 public/images/logo.jpg 上有一张图片，您可以通过以下方式显示该图片：

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

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

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

Answer 10

我发现了另一种实现方法（这是一个功能组件）：

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

希望有帮助！

Answer 11

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

第2步：

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

Answer 12

你需要使用 require 和。默认

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

Answer 13

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

Answer 14

从'./logo.jpeg'导入标志； // 带导入

然后插入...

就是这样。

Answer 15

我的回答基本上与Rubzen的回答非常相似。我使用图像作为对象值，顺便说一句。有两个版本对我有用：

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

或

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

没有包装器-但这也是不同的应用程序。

我也检查了“导入”解决方案，并且在少数情况下它可以工作（这并不奇怪，这是在React中的App.js模式中应用的），但是在上面的情况下却没有。

Answer 16

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

导出默认图片

Answer 17

我已经使用过这种方式，并且可以使用...希望您有用。

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

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

Answer 18

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

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

Answer 19

正如评论中提到的那样，您可以将图像放在公用文件夹中。 Create-React-App的文档中也对此进行了说明：https://create-react-app.dev/docs/using-the-public-folder/

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

19 个答案:

第一

第二