Question

基本上我无法使用本地图像，我真的不确定为什么。我已经安装了url-loader和file-loader以及尝试要求该文件。

HeaderNavigation.js（我尝试使用的图像位于同一目录中，并被引用为品牌形象）。

/**
 * Created by Hewlbern on 17-Jan-17.
 */
import React from 'react';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

//import NavLink from "./Navlink"

export default React.createClass ({
    render() {
        /* <img src={require('./Example.png')} /> */
       // var Replace = "http://cdn.playbuzz.com/cdn/08421690-8191-4264-b479-ce42341e2389/be95b1c7-c95d-41c2-ae7d-1713e67462f3.jpg";
        return (
            <div>
                <Navbar collapseOnSelect>
                    <Navbar.Header>
                        <Navbar.Brand>
                            <LinkContainer to ="/">
                                <img src = {require('./Example.png')}/>
                            </LinkContainer>
                        </Navbar.Brand>
                        <Navbar.Toggle />
                    </Navbar.Header>
                    <Navbar.Collapse>
                        <Nav bsStyle = "tabs" >
                            <LinkContainer to ="/Product">
                                <NavItem eventKey = "{1}" >
                                        Product
                                </NavItem>
                            </LinkContainer>
                            <LinkContainer to ="/About">
                                <NavItem eventKey = "{2}">
                                        About
                                </NavItem>
                            </LinkContainer>
                            <NavDropdown id="nav-dropdown" title  ="More" eventKey = "{3}" pullRight>
                                <LinkContainer to ="/Background">
                                    <MenuItem eventKey = "{1}">
                                            Background
                                    </MenuItem>
                                </LinkContainer>
                                <LinkContainer to ="/Contact Us">
                                    <MenuItem eventKey = "{2}">
                                            Contact Us
                                    </MenuItem>
                                </LinkContainer>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        );
    }
});

这是我的webpack文件。

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");

var config = {
    entry: DEV + "/App.js",
    output: {
        path: OUTPUT,
        filename: "myCode.js"
    },
module: {
    loaders: [
        // js
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel'],
            presets: ['es2015', 'react'],
            include: DEV,
        },
        //    PNG
        {
            test: /\.(gif|jpe?g|png|ico)$/,
            loader: 'url-loader?limit=10000'
        },

        {
            test: /\.(png|jpg)$/,
            loader: 'file-loader'
        },

        // CSS
        {
            test: /\.scss$/,
            include: path.join(__dirname, 'client'),
            loader: 'style-loader!css-loader!sass-loader'
        },
    ]
  }
};

module.exports = config;

Answer 1

这对我有用

import Img from './Example.png'

然后在你的img标签

<img src = {Img} />

Answer 2

如果您想要加载local relative URL加载图像，请执行此操作。 React项目有一个默认的public文件夹。您应该将images文件夹放在里面。它会起作用。

Answer 3

尝试这个，我在我当前的项目中使用此配置。

  module: {
    loaders: [{
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff',
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff2',
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream',
    }, {
      test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-otf',
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file',
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml',
    }, {
      test: /\.png$/,
      loader: 'file?name=media/[name].[ext]',
    }, {
      test: /\.jpg$/,
      loader: 'file?name=media/[name].[ext]',
    }],
  }

Answer 4

从错误看来，您似乎没有为文件的字体图标类型指定加载程序，例如woff，ttf和许多其他文件。

还要确保已安装url-loader和file-loader。

在webpack配置文件中使用以下加载程序 -

   {
            test    : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            loader  : 'file'
   },

同样，对于加载图像，您可以使用以下加载器

  {
          test    : /\.(png|jpg|jpeg)$/,
          include : path.join(__dirname, 'img'),
          loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
  }

此外，如果你使用像这样的网址加载器

'url?limit=10000&mimetype=image/svg+xml'

这意味着可以通过url加载的最大文件大小为10kb，并且它们的mimetype（一种识别媒体文件类型的方式）是svg image，您将收到该文件作为http资源URL。

如果您的文件大小超过10 kb，则url-loader不会加载它，而是由file-loader加载，file-loader将文件作为静态加载入资产。

无法在react.js中使用本地图像

4 个答案: