gpt4 book ai didi

javascript - 如何在 React JS 应用程序中使用 webpack 在 img 标签中提供静态图像路径

转载 作者:行者123 更新时间:2023-12-03 04:06:49 24 4
gpt4 key购买 nike

我正在开发一个 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 中的文件加载器在构建文件夹中生成图像文件夹,并使用从“__path to image”导入图像但是,有什么方法可以在上面的渲染函数中提供直接图像路径提及吗?提前致谢

最佳答案

一种解决方案是使用 CopyWebpackPlugin。这会将您的图像从 src 文件夹复制到 build 文件夹。然后您的应用程序可以解析相对网址。

var CopyWebpackPlugin = require('copy-webpack-plugin');
....
plugins: [
new CopyWebpackPlugin([
{ from: './src/images', to: 'images' },
]),
]

关于javascript - 如何在 React JS 应用程序中使用 webpack 在 img 标签中提供静态图像路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44513612/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com