时间戳

首页 > 解决方案 > 将所有资产导入到一个 images.js 文件中，然后导出为一个对象

reactjs - 将所有资产导入到一个 images.js 文件中，然后导出为一个对象

问题描述

在我的反应应用程序中，目前，在每个组件中我导入一个图像/图标或简单地： const someIcon = '../../images/icon_car.png' 然后使用它。我试图将所有资产集中到一个 images.js 文件中，该文件当前与 /assets 位于同一文件夹中。但是，每当我尝试在另一个文件中使用该资产时，我都会收到“找不到文件错误”。显然 URL 变成了 '/fonts/' （因为 webpack 显然将所有图像都定位到该文件夹​​中）。

so I've got images.js which is something like that:

import carIcon from './icon_car.png';
import manIcon from './icon_man.png';

const IMAGES = {
  carIcon,
  manIcon,
};

export default IMAGES;
// and in myComponent.jsx:
import IMAGES from '../../assets/images';
.
.
.
and then <img src={IMAGES.carIcon} /> for example for accessing the icon.

每当我尝试从另一个组件访问导入的图标时，我都会在控制台中找不到文件。

我的 webpack.config.js：

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  entry: {
    './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),

  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        resolve: { extensions: [".js", ".jsx"] },
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader", // compiles Sass to CSS, using Node Sass by default
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|png|gif)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          },
        }],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
  ],
});

更新：

我刚刚注意到我的项目中的另一个奇怪/令人震惊的行为：当我进入 myComponent.jsx 并导入我的资产时： import { vehicleIcon } from'../../../static/images/icon_car.png'; 当我尝试渲染它时，车辆图标没有显示在屏幕上！！！另外：console.log(vehicleIcon) ==> 未定义！

另一个更新：我注意到的另一件事：每当我在应用程序的任何组件中使用时：它都有效。但我也可以保留 ../../../../images，只要我愿意，资产仍然可以识别并绘制在屏幕上。但是当我从 '../../path_to_assets..' 导入 someIcon 时， someIcon 是未定义的！（即使我的 linter 批准了它是正确的文件夹）

标签： reactjswebpack

解决方案

你可以这样做，

const IMAGES = {
  carIcon:'icon_car.png',
  manIcon:'icon_man.png',
};

export default IMAGES;

// 在 myComponent.jsx 中：

import IMAGES from '../../assets/images';
//Usage
<img src={"path to image folder/"+IMAGES.carIcon} />

推荐阅读