如何在 React 中引用本地图像？
Posted
技术标签:
【中文标题】如何在 React 中引用本地图像？【英文标题】：How do I reference a local image in React? 【发布时间】：2017-02-21 07:13:00 【问题描述】：如何从本地目录加载图像并将其包含在reactjs img src 标签中？
我在我的组件所在的同一文件夹中有一个名为one.jpeg 的图像，我在render 函数中尝试了<img src="one.jpeg" /> 和<img src="one.jpeg" />，但图像没有显示。另外，我无法访问webpack config 文件，因为该项目是使用官方create-react-app 命令行工具创建的。
更新：如果我首先使用import img from './one.jpeg' 导入图像并在img src=img 中使用它，则此方法有效，但我有很多图像文件要导入，因此我想以img src='image_name.jpeg' 的形式使用它们。
【问题讨论】：
React won't load local images的可能重复 另见***.com/questions/37644265/… 我实际上有一个类似的问题，我的图像被导入到 index.jsx 文件中，我在 webpack 中有加载器，编译面工作正常，因为确实是图像的副本在我的 server/public/js 文件夹中创建了一个随机数，它的正确路径在捆绑器中，但我无法可视化图像。这也很奇怪，它是在 server/public/js 中生成的，而不是在我写入 index.js 时在 server/public/img 中生成的 【参考方案1】：首先将src包装在中
如果使用 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 />
我建议您使用此选项，尤其是在您重复使用图像源时。
【讨论】：
注意不要忘记相关网址开头的.。应该是<img src=require('./one.jpeg') />
这些方法是否会影响图像加载时间等性能？如果是这样，哪一个在性能方面更好？
@انعامالرحمٰن - 这里有一些 cmets ***.com/questions/31354559/… 但 TL;DR 没有，没有性能差异。
这里遗漏了这样一个事实，即至少在 webpack 4 中，要使用的加载器是 url-loader 而不是文件一个或上一个
使用 <img src=require('./logo.jpeg').default /> 为我工作【参考方案2】：
最好的办法是先导入图片再使用。
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 />
</div>
</div>
);
【讨论】：
为什么这是最好的方法？ 如果您需要在同一个组件中重用，这是最好的方法，您可以在没有路径引用的情况下使用它。这是一个很好的做法@JasonLeach Jason Leach 更干净的方式【参考方案3】：在 public 文件夹中创建一个 assets 文件夹并相应地放置图像路径。
<img className="img-fluid"
src=`$process.env.PUBLIC_URL/assets/images/uc-white.png`
/>
【讨论】：
谢谢，这在文件夹中可能存在或不存在图像的情况下对我很有用，因为它们是根据显示的资源动态导入的。 为什么会这样？无论我将图像文件夹放在哪里，它都不起作用。但现在我把它放在一个名为“assets”的文件夹中，就像你说的那样，它有效吗？【参考方案4】：您需要将图像源路径包装在中
<img src='path/to/one.jpeg' />
如果使用webpack，则需要使用require
<img src=require('path/to/one.jpeg') />
【讨论】：
【参考方案5】：你需要使用 require 和 .默认
<img src=require('./logo.jpeg').default />
【讨论】：
这成功了！ .default 的用途是什么？【参考方案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>
);
【讨论】：
不支持 src/ 之外的相对导入。为此，您必须将图像保存在 src/ 中，不推荐这样做 @toing_toing 为什么不建议将图像保存在 src 中？官方文档中有这种情况的示例：facebook.github.io/create-react-app/docs/… 增加了 webpack 包的大小和编译时间，每次更改资源都需要重新编译并增加加载时间。我宁愿把它放在公共文件夹中并通过url链接。 @toing_toing 你说你会'宁愿......'，但你没有说怎么做。【参考方案7】：const photo = require(`../../uploads/images/$obj.photo`).default;
...
<img src=photo />
【讨论】：
请，当您回答问题时，请尝试解释您的建议和原因，而不是简单地删除 OP 可能理解或不理解的代码行。您可能还想参考How do I write a good answer? 您好，欢迎来到 SO！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读tour和How do I write a good answer?【参考方案8】：将您的图像放在公共文件夹中或在您的公共文件夹中创建一个子文件夹并将您的图像放在那里。 例如：
-
你把“completative-reptile.jpg”放到公用文件夹里，然后你就可以访问了
src='/completative-reptile.jpg'
-
你把
completative-reptile.jpg放在public/static/images，然后你可以访问它
src='/static/images/completative-reptile.jpg'
【讨论】：
当您尝试将项目置于子文件夹下时，这不起作用【参考方案9】：我找到了另一种实现方式（这是一个功能组件）：
const Image = (icon) =>
const Img = require(`./path_to_your_file/$icon.svg`).ReactComponent;
return <Img />
希望对你有帮助！
【讨论】：
【参考方案10】：你有两种方法可以做到。
首先
在类的顶部导入图像，然后像这样在 <img/> 元素中引用它
import React, Component from 'react';
import myImg from '../path/myImg.svg';
export default class HelloImage extends Component
render()
return <img src=myImg />
第二
您可以像这样在<img/>元素中使用require('../pathToImh/img')直接指定图像路径
import React, Component from 'react';
export default class HelloImage extends Component
render()
return <img src=require(../path/myImg.svg) />
【讨论】：
【参考方案11】：第 1 步：import MyIcon from './img/icon.png'
第 2 步：
<img
src=MyIcon
style=width:'100%', height:'100%'
/>
【讨论】：
【参考方案12】：我遇到了同样的问题，经过研究，我设法通过将 JSON 数据放在 JS 中的常量中来解决它，这样我就能够导入图像并且只在 JSON 对象中通知导入。示例：
import imageImport from './image.png';
export const example = [
"name": "example",
"image": imageImport
]
<Image source=example.image/>
【讨论】：
【参考方案13】：我的回答与 Rubzen 的回答基本相似。顺便说一句，我使用图像作为对象值。 有两个版本适合我：
"name": "Silver Card",
"logo": require('./golden-card.png'),
或
const goldenCard = require('./golden-card.png');
"name": "Silver Card",
"logo": goldenCard,
没有包装器 - 但这也是不同的应用程序。
我也检查了“导入”解决方案，在少数情况下它可以工作（这并不奇怪，这在 React 的 App.js 模式中应用），但不是我上面的情况。
【讨论】：
【参考方案14】：正如 cmets 中提到的，您可以将图像放在公共文件夹中。 Create-React-App 的文档中也对此进行了说明：https://create-react-app.dev/docs/using-the-public-folder/
【讨论】：
实际上不需要比文档<img src=process.env.PUBLIC_URL + '/img/logo.png' />中的一行更多的代码【参考方案15】：
对于想要使用多张图片的人来说，一张一张地导入它们当然是个问题。解决方案是将图像文件夹移动到公用文件夹。因此，如果您在 public/images/logo.jpg 中有一张图片，您可以这样显示该图片：
function Header()
return (
<div>
<img src="images/logo.jpg" />
</div>
);
是的，不需要在源码中使用/public/。
进一步阅读：https://daveceddia.com/react-image-tag/。
【讨论】：
【参考方案16】：首先你必须导入图片
import logo from './logo.jpeg'; // with import
然后插入...
<img src=logo />
就是这样。
【讨论】：
【参考方案17】：为了使 require 方法起作用，我必须添加“.default”，如下所示：
<img src=require('./path/to/image.svg').default />
【讨论】：
【参考方案18】：我用过这种方式，效果很好……希望对你有用。
const logofooter = require('../../project-files/images/logo.png');
return(
<div className="blockquote text-center">
<img src=logofooter />
<div/>
);
【讨论】：
【参考方案19】：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/>
);
导出默认图片
【讨论】：
【参考方案20】：您可以创建一个名为 images.js 的文件并在其中引用您的所有应用资源，然后将该组件导入您需要显示图像的所有其他组件中
【讨论】：
【参考方案21】：我想导入多个图像并将它们传递给不同的组件。原来我只需要一次导入多个图像，我可以通过传递一个道具在任何组件中使用它们。
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>
【讨论】：
【参考方案22】：import image from './img/one.jpg';
class Icons extends React.Component
render()
return(
<img className='profile-image' alt='icon' src=image/>
);
export default Icons;
【讨论】：
以上是关于如何在 React 中引用本地图像？的主要内容，如果未能解决你的问题，请参考以下文章
React Native - 如何从 WebView 上的本地路径加载图像