1

在 React 上存储本地资产非常新。

我已经使用 file-loader 和 image-loader 配置了 webpack，并将图像存储在本地，但由于某种原因，它似乎没有显示：

import React, { Component } from 'react';
import WorkItem from './work-item';
import WorkItemsArray from './work-items-array';

class Work extends Component {
  render() {
    return (
      <div id='work'>
        <h1>Work</h1>
        <img src={require('../images/weatherImg.png')}/>
        <div id='portfolio'>
          {WorkItemsArray.map(({ url, img, title, description, github }) => {
            return (
              <WorkItem
                key={title}
                url={url}
                img={img}
                title={title}
                description={description}
                github={github}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

export default Work;

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: [/\.css$/, /\.scss$/],
        exclude: /node_modules/,
        loaders: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name]_[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

文件夹目录树

FWIW，我根本没有收到任何错误，只是图像似乎没有加载。

非常感谢任何帮助！

4

2 回答 2

1

由于您假设您没有收到任何错误，因此您有两种可能性：-

  1. 要么图像不可见（可能是因为高度和宽度很小）

  2. 或者整个组件<Work />没有被渲染，甚至没有被渲染，然后它被卸载而没有检测到它。

首先，强制图像的特定大小或替换另一个图像：-

    <img src={require('../images/weatherImg.png')} width="400" height="500"/>

第二个，添加一个componentDidMount和componentWillUnmount调试，然后检查浏览器控制台：-

  class Work extends Component {
    componentDidMount() {
      console.log(new Date(), ' Work is mouned ');
    }

    componentWillUnmount() {
      console.log(new Date(), ' Work will be killed ');
    }
    render() {
      //...
    }
  }
于 2017-12-02T04:59:55.713 回答
0

假设您在images文件夹中有public文件夹。

尝试：

<img src={require(process.env.PUBLIC_URL + "/images/dog.png")}

对于其他人，如果您不使用 webpack，请尝试：

<img src={process.env.PUBLIC_URL + "/images/dog.png"}

于 2020-07-14T22:54:32.177 回答