使用 JSX 在 React 中显示图像而无需导入

IT技术 javascript reactjs jsx
2021-03-24 18:42:55

我面临的问题是img标签。当涉及单个图像时，以下代码加载图像：

import image1 from './images/image1.jpg';
<img src={image1} />

但是下面的代码没有加载：

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

我需要遍历 json，例如：

[{'img':'./images/image1.jpg','name':'AAA'}, {'img':'./images/image2.jpg','name':'BBB'}]

另外，将它们中的每一个显示为图像，名称为页脚。循环很好，但图像无法加载。我实际上不可能导入要添加的每个图像。我现在不使用 JSX 以外的任何东西。请赐教。

6个回答

您需要像这样要求文件：

<img src={ require('./images/image1.jpg') } />
我实际上必须制作一个单独的文件来导入所有图像，然后我可以导入该文件并引用图像。感觉有点疯狂，但现在 React、Webpack 和 ESLint 似乎很高兴。
2021-06-02 18:42:55
@pixelwiz 如果您启用了该设置，请将 ' 替换为反引号 `。
2021-06-07 18:42:55
eslint 抱怨说“意外的要求（）。（全局要求）”还说“对要求（）的调用应该使用字符串文字（导入/无动态要求）”
2021-06-19 18:42:55

require用于静态“导入”，因此您只需要更改imports.

例子：

var imageName = require('./images/image1.jpg')
<img src={imageName} />
不客气 :) 你可以接受我的回答来解决你的问题，所以它有助于 stackoverflow 社区
2021-05-28 18:42:55
你说的对！它真的有那个“等待时间”......哈哈
2021-06-11 18:42:55
我一直在尝试。但我收到了一条通知，目前我可以在 4 分钟后接受。
2021-06-17 18:42:55

我们可以使用 require 代替 import 语句。喜欢 ，

<img src={require("folder/image.format")} alt="image not found" />

但是如果你运行它，它会显示找不到图像！！！

我们可以通过添加.default更改语句来简单地解决它

let image = require("folder/image.format");

<img src={image.default} alt="image not found" />
有趣的。在这个问题问了 3 年后，我发现这个特定的评论很有帮助。我default出于某种原因需要那个。
2021-05-31 18:42:55
也帮助了我，原始答案确实编译了，但它没有显示请求的图像。谢谢
2021-06-17 18:42:55

我刚试过这个，它有效！

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}

建议的答案似乎不再起作用。这是一个突出问题的代码片段。

import React from 'react';
import importImg from '../images/img.jpg';
export default function ImgTest(){
return(<>
<img src={importImg} alt='import'></img><br/>
<img src={require('../images/img.jpg')} alt='require function fails'></img><br/>
</>)
}

呈现此代码时，会发生以下情况。

第一个显示图像 - 它是预期的结果

第二个显示 alt“要求功能失败” - 不是预期的结果

其它你可能感兴趣的问题
上一篇React + Material-UI - 警告：Prop className 不匹配 下一篇如何在 React 组件上测试 prop 更新