[英]How to serve my React webapp on static server after using Webpack?
[英]How to serve static Image path in img tag with webpack in React JS application
我正在开发一个React应用程序,其中我在img标签中使用了如下所示的硬编码图像路径的渲染功能
import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
< img src="images/logo.png" alt=""/>
);
}
}
const root = document.getElementById('app-container');
ReactDom.render(<App />, root);
当我使用webpack-dev-server运行应用程序时,应用程序运行良好,并且可以看到网页图像。 但是,当我使用webpack命令运行应用程序时,它将生成生成文件夹,并且当我运行应用程序时; 我看不到网页中的图像。 我的webpack.config.js是:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
resolve(__dirname, 'src', 'js/app.js'),
],
output: {
filename: '[name].[hash].js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader?sourceMap&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'sass-loader?sourceMap'
]
}
},
plugins: [
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: resolve(__dirname, 'src', 'index.html')
})
]
}
我了解我们可以在webpack中使用文件加载器在生成文件夹中生成图像文件夹,并使用import image from "__path to image"
但是,有什么方法可以在上面的render函数中提供直接的图像路径吗? 提前致谢
一种解决方案是使用CopyWebpackPlugin。 这会将您的图片从src文件夹复制到build文件夹。 然后,您的应用可以解析相对网址。
var CopyWebpackPlugin = require('copy-webpack-plugin');
....
plugins: [
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' },
]),
]
一种解决方案是您必须安装url-loader。这是命令npm install --save-dev url-loader
然后在您的规则部分的webpack.config文件中添加以下代码。
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=25000'
},
接下来,将图像导入到APP组件中。
从'images / logo.png'导入徽标;
并在img标签中传递徽标。
<img src = {logo} alt =“” />
import '../css/styles.scss';
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import { List } from './list';
import logo from 'images/logo.png';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
< img src={logo} alt=""/>
);
}
}
const root = document.getElementById('app-container');
ReactDom.render(<App />, root);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.