没有加载 Webpack 的静态图像答案

【问题标题】：Static images with Webpack not loading没有加载 Webpack 的静态图像
【发布时间】：2018-05-10 02:32:18
【问题描述】：

我正在使用 Webpack 处理 React，但无法加载静态图像。加载器似乎正确地将图像转换为 URL，但在呈现页面时它似乎不能作为 img src 工作。图像的相对路径是正确的。下面是我的代码：

webpack.config.dev.js：

module: {
loaders: [
  {
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
  }, {
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
  }, {
    test: /\.jsx*$/,
    exclude: [/node_modules/, /.+\.config.js/],
    loader: 'babel',
  }, {
    test: /\.(jpe?g|gif|png|svg)$/i,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
  }, {
    test: /\.json$/,
    loader: 'json-loader',
  }, { 
    test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
],
},

反应代码

import React, { Component} from 'react';

import styles from './Album.css';

const logo = require('./img/MoP.png');

export class Album extends Component{
  constructor(props){
    super(props);

    console.log(logo);
}

render(){
    return (
        <div className = {styles.album}>
            <div className="row">
                <div className="col-8">
                    <div className="albumInfo">
                        <h6> {this.props.title} </h6>
                        <h6> {this.props.artist} </h6>
                        <h6> {this.props.date} </h6>
                        <h6> Rating: {this.props.rating} </h6>
                        <h6> {this.props.comment} </h6>
                    </div>
                </div>
                <div className="col-4 align-self-center">
                    <img src={logo}></img>
                </div>
            </div>
        </div>
    )
}
}

export default Album;

我使用 url-loader 和 file-loader 尝试了很多不同的方法，但我还没有运气。我将不胜感激！

谢谢。

【问题讨论】：

编辑：console.log(logo) 的输出为：data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhNDVlZjc0ZTc5MjY3ZDZkNzcxMWFjYmI2ZDA1ZGU
您能否尝试将 logo 值用引号括起来，并使 img 标签成为自闭合标签？因此：<img src="{logo}"/> 没有 </img>
“不起作用”是什么意思？损坏的img，根本没有图像，等等..？你能看到使用浏览器的开发工具检查 DOM 的 src 图像吗？这可能只是一个 CSS 问题。
@toomuchdesign 问题是根本没有图像显示。检查元素后，base64 编码的字符串出现在 img src 中，但图像没有被渲染。
@DSCH 我尝试了您的建议并得到了这样的 404：GET localhost:8000/%7Blogo%7D 404（未找到）

标签： javascript reactjs webpack urlloader

【解决方案1】：

从 webpack 配置看来，您在相同的文件类型上运行了两次 url-loader。这可能会破坏您的图像输出。

【讨论】：

我的坏了，因为我在同一个文件上运行 file-loader 和 url-loader

【解决方案2】：

您看到的是图像的 base64 编码。我不熟悉“url-loader”，但快速浏览一下他们的page 说它将图像加载为base64。你可以在这里找到一些有用的信息：https://css-tricks.com/data-uris/ 如果您更喜欢图像路径而不是 base64，则可能需要考虑使用不同的加载器。希望对您有所帮助。

【讨论】：