Question

我正在开发一个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运行应用程序时，应用程序运行正常，我可以看到图像o网页。但是，当我使用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中使用file-loader在build文件夹中生成image文件夹并使用import image from "__path to image" 但是有没有办法在上面的渲染功能中提供直接图像路径提示？提前致谢

Answer 1

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

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

Answer 2

一个解决方案是你必须安装url-loader。这是命令 npm install --save-dev url-loader

然后在规则部分的webpack.config文件中添加以下代码。

{
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=25000'
    },

接下来在您的APP组件中导入您的图片。

从＆＃39; images / logo.png＆＃39;;

导入徽标

并在img标签中传递徽标。就像这个

<强>＆LT; img src = {logo} alt =＆＃34;＆＃34; /＆gt;

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);

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

2 个答案: