Question

我有一个目标文件，其中包含个人信息，包括图像，问题是我无法使用Variable加载图像，我可以通过以下方式加载图像：

<h1><img src={require('./img/osama.PNG')} class="bd-placeholder-img rounded-circle"
       height="250px" width="250px"/></h1>

但是如果我尝试从这样的对象中加载它：

 <h1><img src={require(Personal.img)} class="bd-placeholder-img rounded-circle"
       height="250px" width="250px"/></h1>

给我看这个错误：

Error: Cannot find module './img/osama.PNG'
webpackEmptyContext
G:/sportfolio/src/components sync:2
Header.render
G:/sportfolio/src/components/Header.js:13
  10 |               <div class="bg-img">
  11 | <section class="sheader text-center">
  12 |     <div class="container">
> 13 |       <h1><img src={require(Personal.img)} class="bd-placeholder-img rounded-circle"
  14 |        height="250px" width="250px"/></h1>
  15 |       <p class="lead-h lead"><b>{Personal.name}</b></p>
  16 |       <p>
View compiled
▶ 18 stack frames were collapsed.
Module../src/index.js
G:/sportfolio/src/index.js:6
  3 | import App from './App';
  4 | import * as serviceWorker from './serviceWorker';
  5 | import {BrowserRouter as Router} from "react-router-dom";
> 6 | ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
  7 | 
  8 | // If you want your app to work offline and load faster, you can change
  9 | // unregister() to register() below. Note this comes with some pitfalls.

如果我对此进行测试

console.log(Personal.img)

向我显示完全相同的图片网址（'./img/osama.PNG'），我不知道问题出在哪里

React中加载内部图像的问题

0 个答案: