Question

我对加载图片感到困惑，我已经搜索了所有来源，但我找不到任何答案。它下面的代码不起作用

import goldImage from './../../../public/img/gold.png';

但是当我这样写的时候，它就有效：

const gold = '../../../public/img/gold.png';

或者如果我导入JPG文件，它可以正常工作：

import test from './../../../public/img/kaslie.jpg';

我也使用Webpack 2，这是我的代码：

test: /\.(png|jpe?g|gif|svg)$/,
            use:[
                {
                loader: 'url-loader',
                options:{limit:40000,name:'[path][name].[ext]?[hash]'}
                },
                'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]

我对此没有任何想法，为什么它只能用于jpg文件，但是PNG文件不起作用。

Answer 1

对于您应该使用的图像：

const goldImage = require('./../../../public/img/gold.png');

<image src{goldImage} alt="" />

import语句用于导入从外部模块，另一个脚本等导出的函数，对象或基元。

React JS - 加载图像问题

1 个答案: