React - 加载图像时出现状态错误答案

【问题标题】：React - State Error when loading imageReact - 加载图像时出现状态错误
【发布时间】：2017-05-17 11:51:04
【问题描述】：

在尝试显示图像时，我在 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>

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

【问题讨论】：

你需要这条线吗？ require('../img/logo.svg');
谢谢...在这个例子中不需要它。它只是从另一种加载图像的方法中遗留下来的

标签： javascript facebook reactjs svg webpack

【解决方案1】：

正如 Martin 在 cmets 中建议的那样，有很多东西，你需要第 3 行的 require 语句吗？

首先，您还缺少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" />

【讨论】：