React js导入图像问题答案

【问题标题】：React js Import image issueReact js导入图像问题
【发布时间】：2018-04-02 11:45:12
【问题描述】：

帮我解决 React js 导入图片问题图片不工作我尝试了太多次控制台日志错误图片和文件夹结构。

如果我输入直接服务器 URL，图像是可见的

    import React, {Component} from 'react';
    import '../assets/css/bootstrap.css';
    import '../assets/css/home.css';
    import { Meteor } from 'meteor/meteor';
    import { render } from 'react-dom';
    import logo from '../assets/img/donut-logo.jpg';


    class Home extends Component {
        render() {
            return (

                <main>
                    <div className="container-fluid mainheader">
                        <div className="container mainheader-wrapper">
                             <img src="{logo}" />
                        </div>
                    </div>    
                        <div className="container mainheader-btn">
                            <div className="col-md-6">
                                <a href={FlowRouter.url('login')}>Login</a>
                            </div>
                            <div className="col-md-6">
                                <a href={FlowRouter.url('register')}>Register</a>
                            </div>
                        </div> 
                </main>
            )
        }
    }

    Home.propTypes = {};
    Home.defaultProps = {};

export default Home;
[![enter image description here][3]][3]
[![enter image description here][1]][1]
[![enter image description here][2]][2]

  [1]: https://i.stack.imgur.com/onDQu.png
  [2]: https://i.stack.imgur.com/ripwM.png
  [3]: https://i.stack.imgur.com/E9TEP.png

【问题讨论】：

只是给我你的文件夹结构的粗略视图？
请将错误发布为文本而不是屏幕截图。
您能否添加文件夹结构以找出问题所在。
@Prashant 您的图片中的错误是用于查找名为 donut-logo.jpg 的图片，您确定收到的消息正确吗？
@Upasana 是的，我们正在使用相同的图像

标签： reactjs

【解决方案1】：

您是否使用 web pack 进行捆绑。如果您使用过，请按照以下内容操作。

在你的 webpack 的配置文件中添加 url-loader，如下所示。

{
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000',
    options: {
      mimetype: 'image/png'
    }
  }

【讨论】：

【解决方案2】：

似乎您正在使用 Meteor 和 ReactJS。

尝试在根目录下创建公用文件夹（与客户端、服务器、导入同级），将图片放入公用文件夹，然后尝试导入。

【讨论】：