Question

我正在尝试使用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;

这是我的webpack文件：

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()]
};

Answer 1

您需要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'
  ]
};

此规则将内嵌小于8KB的图像。您需要在image-webpack-loader的{{1}}中使用url-loader和devDependencies，然后该规则就会在Webpack配置的package.json部分中出现，即

module.rules

作为参考，这里是full Webpack config，其中包括上面的代码段。

与Bulma一起使用时，为什么我的img中的require（）无法正常工作？

1 个答案: