React js导入图像问题

时间:2018-04-02 11:45:12

标签: reactjs

帮我解决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

2 个答案:

答案 0 :(得分:0)

您使用网络包进行捆绑吗? 如果您使用的话请按照以下内容进行操作。

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

using System;
using System.Collections.Generic;

namespace LanguageNumberConverter
{
class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Enter a number: ");
        var input = int.Parse(Console.ReadLine());

        var result = NumberConverter(input);

        Console.WriteLine($"The number {input} = {result}.");
    }

    static string NumberConverter(int number)
    {
        var resultWords = new List<string>();
        var chars = number.ToString().ToCharArray();

        var largeCount = (chars.Length - 1) / 3;

        for (var l = largeCount; l >= 0; l--)
        {

            var searchRange = chars.Length - (l * 3);
            var digitStart = searchRange - 3 > 0 ? searchRange - 3 : 0;
            var digitsInLarge = l == largeCount ? chars.Length % 3 : 3;
            var teenFound = false;

            //Hundreds
            if (digitsInLarge > 2)
            {
                var hunDigit = int.Parse(chars[digitStart].ToString());
                resultWords.Add(Ones[hunDigit]);
                resultWords.Add("Hundred");
            }

            //Tens
            if (digitsInLarge > 1)
            {
                var tenDigit = int.Parse(chars[digitStart + digitsInLarge - 2].ToString());
                if (tenDigit == 1)
                {
                    teenFound = true;
                    var teenDigit = (tenDigit * 10) + int.Parse(chars[digitStart + digitsInLarge - 1].ToString());
                    resultWords.Add(Ones[teenDigit]);
                }
                else
                {
                    resultWords.Add(Tens[tenDigit]);
                }
            }

            //Ones
            if (!teenFound)
            {
                var oneDigit = int.Parse(chars[digitStart + digitsInLarge - 1].ToString());
                resultWords.Add(Ones[oneDigit]);
            }

            //Large
            if (l > 0)
            {
                var unit = Large[l];
                resultWords.Add(unit);
            }
        }

        var result = "";
        foreach (var word in resultWords)
        {
            result += word + " ";
        }
        return result.Trim();
    }

    static string[] Ones =
    {
        "Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine",
        "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen",
        "Eighteen", "Nineteen"
    };

    static string[] Tens =
    {
        "Zero", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy",
        "Eighty", "Ninety"
    };

    static string[] Large =
    {
        "Zero", "Thousand", "Million", "Billion", "Trillion"
    };
}

答案 1 :(得分:0)

好像你正在使用Meteor和ReactJS。

尝试在根目录(与客户端,服务器,导入相同的级别)中创建公用文件夹,将图像放在公用文件夹中,然后尝试导入它。