Question

我想在本地将图像添加到我的React网站。因此，我做了<img src={require('./wally.jpg')} />，但似乎没有用。然后，我使用PNG <img src={require('./wally.png')} />尝试了同样的方法，并且有效。所以，问题是我无法在React网站上添加JPG图片。为什么JPG无法呈现？

我尝试过：

在渲染之前导入图像。

使用<img src={require('image url')} />

安装url-loader和文件加载器。

使用CSS上传图片。

使用<img src='./wally.jpg' />

还尝试更改图像的位置。

HomePage.jsx

import React, { Component } from 'react';
import "./HomePage.css";


class HomePage extends Component {
  render() {
    return (
      <div className = "HomePage">
        <h1 className = "HomeHeading">Navin Kumar</h1>
        <img src={require('./wally.jpg')} />
        <p className = "HomeContent">Few Good lines about me.</p>
      </div>
   )
 }
}
export default HomePage;

Webpack.config.js

const path = require('path');
const SRC_DIR = path.join(__dirname, '/portfolio/src');
const DIST_DIR = path.join(__dirname, '/portfolio/dist');
const webpack = require('webpack');
module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    path: DIST_DIR,
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css']
  },
  module : {
    rules : [
     {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=100000&minetype=image/png'
      },
      {
        test: /\.jpg/,
        loader: 'file-loader'
      },
      {
        test : /\.jsx?/,
        include : SRC_DIR,
        loader : 'babel-loader',      
        query: {
          presets: ['react', 'es2015']
       }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

我希望输出显示图像，但它显示的是图像持有人（当html文件找不到图像时显示的相同图标），当我尝试在新标签中将其打开时，空白页。因此，构建没有问题，但是在控制台上它显示未定义。

Answer 1

您正尝试在此处test: /\.(png|jpg)$/,将jpg通过png加载器传递。如果您在此处删除对jpg的引用，它将通过下一个加载程序，并且应该可以正常工作。

使用PNG时，React无法在页面上呈现JPG图像

1 个答案: