Question

在尝试显示图像时，我在React中遇到了一个奇怪的问题。导致此问题的代码是<img src={'./assets/logo.svg'} />标记。但是，尽管出现错误消息，仍会显示图像。

错误消息如下：

这是组件代码：

import React from 'react';
import ReactDOM from 'react-dom'
require('../img/logo.svg');

export default class App extends React.Component {

constructor(props) {
    super(props);        
}
render() {
    return (
        <div className="app-wrapper">
            <img src={'./assets/logo.svg'} />
        </div>
    )
}

ReactDOM.render( <App />, document.getElementById('app'));

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Pegasus</title>
</head>

<body>
    <div id="app" />
    <script src="app.js" type="text/javascript"></script>
</body>

</html>

任何建议都非常感谢！谢谢！

Answer 1

正如Martin在评论中所说，有很多事情需要第3行的需求声明吗？

首先，您还错过了class的右括号。其次，您需要import或require图片。

import React from 'react';
import ReactDOM from 'react-dom';
import logo from './assets/logo.svg';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="app-wrapper">
        <img src={logo} />
        {/* OR <img src={require('./assets/logo.svg')} /> */}
      </div>
    );
  }
}

最后一点，当您向下传递属于String类型的props时，你不需要将它们包裹在{}中，你可以将它们传递下去：

<Navigation title="My Navigation" />

加载图像时出现React - State错误

1 个答案: