使用 JSX 在 React 中顯示圖像而無需導入

Question

我面臨的問題是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 以外的任何東西。 請賜教。

Answer 1

您需要像這樣要求文件：

<img src={ require('./images/image1.jpg') } />

Answer 2

require用於靜態“導入”，因此您只需要更改imports 。

例子：

var imageName = require('./images/image1.jpg')
<img src={imageName} />

Answer 3

我們可以使用 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" />

Answer 4

我剛試過這個，它有效！

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

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

Answer 5

建議的答案似乎不再起作用。 這是一個突出問題的代碼片段。

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“要求功能失敗” - 不是預期的結果

Answer 6

這是因為，您已將圖像文件夾放在 src 文件夾中。 所以你應該導入或要求它。 直接把圖片來源放到public文件夾下就可以了，不用導入或使用require，像這樣。

<img src='/images/image1.jpg' />