我已经花了好几个小时来寻找,找不到有效的解决方案。
我正在尝试将本地uri添加到and img元素,但是它无法解决。
import React from 'react'
import image from '../assets/udemy2.PNG'
const WorkingSpinner = () => (
<div>
<img height="50px" width="50px" src={image}/>
</div>
)
export default WorkingSpinner
我正在尝试将file-loader
与webpack
结合使用,并且我的配置看起来像这样:
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
loader: 'file-loader',
test: /\.(png|jpe?g|gif)$/i,
options: {
name: '[name].[ext]',
outputPath: "images"
}
}, {
loader: 'url-loader?limit=8192',
test: /\.(png|jpe?g|gif)$/i,
}]
我只是不知道为什么它不起作用,根据我看到的文档和不同的教程,我正在根据解决方案进行操作。但是,当我尝试渲染组件时,我得到的只是一个空图像。
我不确定这是否是最好的方法,但是在我的应用程序中,我为此使用了copy-webpack-plugin(https://github.com/webpack-contrib/copy-webpack-plugin:]]
plugins: [ ... someOtherPlugins, new CopyWebpackPlugin([{from: 'images/*.*'}]) ]
然后从React组件调用
<img height="50px" width="50px" src={'/images/image.jpeg'}/>