使用webpack loader在React中加载图像
我无法在React组件中显示图像。经过多次尝试（尝试了这个，这个，这个，这个，这个，这个和这个）和错误之后，我请求帮助。我正在开发构建（不是生产构建）。
我仍然得到这个错误：
Module parse failed: /project/src/images/net.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
组成部分
import thumbnail from '../images/net.png';
<img src={thumbnail}/>
网页包配置：
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'./src/index'
],
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
task `npm run build`.
publicPath: 'http://localhost:3000/',
filename: 'bundle.js'
},
devServer: {
contentBase: './src'
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()],
module: {
rules: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader'
},
{
test: /(\.css)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { sourcemap: true }
}
]
},
{
test: /\.(svg|png|jpg|jpeg|gif)$/,
include: './src/images',
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: paths.build
}
}
}
]
}
目录结构
Project
-- src
-----components
-----images
-----index.js
如何显示图像？
这里的示例代码： githublink查看 /src/components/home/HomePage.js
我可以做些什么来查看主页上的图像？
共有3个答案
test:/\（\？*$）/，
请尝试在文件加载器加载器中使用此选项。请注意（？.*$|$）而不是普通的$。
我用url-loader代替。
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
options: {
limit: 25000 // Max file size = 25kb
}
}
}
我不确定。但是，我认为您应该首先将其安装为devDependencies，例如warn add-D url loader。
您是否尝试过此网页包配置
{test://\（png | svg | jpg | gif）$/，使用：[‘文件加载器’]}
-
当我启动应用程序时，我没有看到任何错误，但是是一个空数组。组件本身位于。我试着直接加载图像： 但无论我指定的路径是什么，如果出现错误，它就不能正常工作了。但是，我需要从文件夹加载所有图像，而不是静态加载，因为我事先不知道图像的名称。如有任何建议，将不胜感激。
-
无法将获取错误的图像显示为未找到，但我已为其提供了完整路径。我不知道我错在哪里。
-
我正在使用Glide库在imageview中加载图像，并使用以下代码。 灰色占位符在图像未加载之前可见，但在图像在imageview中加载后，占位符仍会出现，并在该图像后显示一些空白。 我如何解决这个问题。如果你有任何想法，请帮助我。
-
我使用滑翔库来显示网格视图中的图像，但是在我的图像视图中显示了注释。 E/Glide:class com。邦普泰克。滑行负载发动机GlideException:无法加载资源 我的代码在使用位图时工作正常。这是我的密码：
-
问题内容： 我使用图片插件（ image：^ 2.0.4 ），以便可以在图片上写一些内容，然后将其保存为新图片到设备或通过邮件发送。我尝试使用“ new File ” 加载图像，但Flutter出现错误。我询问并搜索，并得到一个提示，我可以使用rootBundle在Flutter中加载图像。我做到了，我得到以下错误。 [错误：topaz / lib / tonic / logging / dart
-
我目前正在尝试用react native为android设备编写应用程序。我已经创建了一个自定义加载组件，并正在使用显示加载图标。 但是，我想使用包含我的应用程序颜色的自定义gif加载图标。我看了看，但似乎找不到任何东西，可以这样做吗？