URL-загрузчик / загрузчик файлов в веб-пакете: невозможно загрузить изображения (неожиданный символ) - PullRequest
Новая
       116

URL-загрузчик / загрузчик файлов в веб-пакете: невозможно загрузить изображения (неожиданный символ)

0 голосов
/ 08 ноября 2019

Я пытаюсь загрузить фотографию профиля в заголовок моего сайта, но у меня возникают проблемы при взаимодействии Webpack. Я пробовал как url-loader, так и file-loader безуспешно.

Это сообщение об ошибке, которое я получаю от nodemon: 

/local/path/project/node_modules/babel-core/lib/transformation/file/index.js:558
      throw err;
      ^

SyntaxError: /local/path/project/public/images/ProfilePic_100px.jpg: Unexpected character '�' (1:0)
> 1 | ����

[nodemon] app crashed - waiting for file changes before starting...

Мой каталог проектов:

enter image description here

My Header.js: 

import React from 'react';
import PropTypes from 'prop-types';
import ProfilePic from '../../../public/images/ProfilePic_100px.jpg';

class Header extends React.Component {

    render() {
        return (
                <!-- Stuff here -->
                <div className="Header-userCol">
                    <div className="header-userImage">
                        <img src={ProfilePic} alt={"userPic"} />
                    </div>
                    <div className="header-userName">Daniel Way</div>
                </div>

            </header>
        );
    }
}

Header.propTypes = {
    fetchHomePage: PropTypes.func.isRequired,
    fetchProjectsPage: PropTypes.func.isRequired,
    fetchIdeasPage: PropTypes.func.isRequired
}

export default Header;

My Webpack.config: 

var webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  node: {
      fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.mp3$\.m4a$\.aiff$\.wav$\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)$/,
        loader: 'url-loader'
      },
      {
          test: /\.(jpg|jpeg|gif|png|svg|webp)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                outputPath: './public/images',
                name: "[name].[ext]",
              },
            },
          ]
      },
      {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
      },
      {
          test: /\.scss$/,
          use: ["style-loader", "'css-loader?modules=true&camelCase=true'", "sass-loader"]
      },
      {
        test: require.resolve("wavesurfer.js"),
        resourceQuery: '/inline/',
        use: "expose-loader"
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
        WaveSurfer: 'wavesurfer.js'
    }),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  resolve: {
      alias: {
          wavesurfer: require.resolve('wavesurfer.js')
      }
  }
};

Обратите внимание, что у меня нет проблем с импортом изображений из index.js (мой файл ввода в каталоге src), но я не могу сделать то же самое с компонентами, загруженными в само приложение. Я ни в коем случае не волшебник вебпаков, поэтому всякая помощь приветствуется. Спасибо

...