Почему мой require () внутри img не работает правильно при использовании его с Bulma? - PullRequest
Новая
       13

Почему мой require () внутри img не работает правильно при использовании его с Bulma?

0 голосов
/ 07 января 2019

Я пытаюсь динамически отобразить изображение, используя require() в одном из моих Bulma компонентов. Кроме того, потому что я использую webpack (я не использовал create-react-app для запуска проекта), но по какой-то причине в консоли я получаю сообщение об ошибке:

ERROR in ./src/images/myImage.png 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

Путь к файлу в ошибке неверен, что странно для меня. Это читает это иначе, чем это должно было вызвать эту ошибку?

Я пробовал <img src={myImage} alt="image"/> (без require()), но все равно не работает.

Что я делаю не так и как я могу это исправить?

Я пометил его как {/* Here's the problem */}, который указывает на то, какая строка вызывает ошибку.

Вот мой код: 

import React from 'react';
import myImage from '../../images/myImage.png';

const Tiles = () => {
    return(
        <div className="tile">
            <div className="tile is-vertical is-8">
                <div className="tile">
                    <div className="tile is-parent is-vertical">
                        <article className="tile is-child notification">
                            <p className="title">Vertical...</p>
                            <p className="subtitle">Top tile</p>
                        </article>
                        <article className="tile is-child notification">
                            <p className="title">...tiles</p>
                            <p className="subtitle">Bottom tile</p>
                        </article>
                    </div>
                    <div className="tile is-parent">
                        <article className="tile is-child notification">
                            <p className="title">Middle tile</p>
                            <p className="subtitle">With an image</p>
                            <figure className="image is-4by3">
                                <img src="https://bulma.io/images/placeholders/640x480.png"/>
                            </figure>
                        </article>
                    </div>
                </div>
                <div className="tile">
                    <article className="tile is-child notification">
                        <p className="title">Wide tile</p>
                        <p className="subtitle">Aligned with the right tile</p>
                        <div className="content">
                            {/* Here's the problem */}
                            <img src={require(myImage)} alt="image"/>
                        </div>
                    </article>
                </div>
            </div>
            <div className="tile is-parent">
                <article className="tile is-child notification">
                    <div className="content">
                        <p className="title">Tall tile</p>
                        <p className="subtitle">With even more content</p>
                        <div className="content">
                        </div>
                    </div>
                </article>
            </div>
        </div>
    );
}

export default Tiles;

Вот мой файл веб-пакета: 

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

const imageRule = {
    test: /\.(ico|gif|jpe?g|png)(\?.+)?$/i,
    use: [
        {
            loader: 'url-loader',  // defaults to file-loader (with options) when image size > options.limit
            options: {
                limit: 8192,
                name: 'assets/[sha512:hash].[ext]'
            }
        },
        'image-webpack-loader'
    ]
};


module.exports = {
    entry: "./src/index.js",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                options: { presets: ["@babel/env"] }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            imageRule
        ]
    },
    resolve: { extensions: ["*", ".js", ".jsx"] },
    output: {
        path: path.resolve(__dirname, "dist/"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: path.join(__dirname, "public/"),
        port: 3000,
        publicPath: "http://localhost:3000/dist/",
        hotOnly: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
};

1 Ответ

0 голосов
/ 07 января 2019

Вам нужно правило для изображений в вашей конфигурации Webpack. Вот тот, который я использую: 

const imageRule = {
  test: /\.(ico|gif|jpe?g|png)(\?.+)?$/i,
  use: [
    {
      loader: 'url-loader',  // defaults to file-loader (with options) when image size > options.limit
      options: {
        limit: 8192,
        name: 'assets/[sha512:hash].[ext]'
      }
    },
    'image-webpack-loader'
  ]
};

Это правило встроит изображения размером менее 8 КБ. Вам нужно image-webpack-loader и url-loader в devDependencies вашего package.json, а правило относится к module.rules разделам вашей конфигурации Webpack, т.е. 

...
module: {
  rules: [ ..., imageRule, ... ]
},
...

Для справки, вот полная конфигурация Webpack , включающая фрагмент выше.

...