时间戳

首页 > 解决方案 > 在 React 中需要本地图像

javascript - 在 React 中需要本地图像

问题描述

我正在尝试通过必须从组件的道具获取的路径加载本地 JPG 图像。但是当我尝试这样做时，图像没有加载，它的 src 路径看起来像这样：

Module {default: "/ff5a7601c48dcb99c92acfca45eb2439.png", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

但是当我使用 import 语句时，它会输出正确的路径：

/fa8b72877658d9175b437ebb88e3ef2c.jpg

我不能使用导入，因为我需要获取组件主体中的路径。那么，如何正确加载文件？

有我的 JSX 组件：

import React from 'react';
import { Card } from 'react-bootstrap';

import '../../../resources/scss/style.scss';

class ArticleCard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const { article } = this.props;

    return (
      <Card>
        <Card.Img variant="top" src={require(article.imagePath)} />
        <Card.Body>
          <Card.Title>{article.title}</Card.Title>
          <Card.Text>{article.description}</Card.Text>
        </Card.Body>
      </Card>
    )
  }
}

export default ArticleCard;

和 webpack.config.js 片段：

{
   test: /\.(jpe?g|png|gif|svg|jpg)$/i,
   use: {
      loader: 'file-loader',
      options: {
         name: 'client/resources/images/[name].[ext]',
         outputPath: 'dist/img/',
      },
   },
},

标签： javascriptreactjsimagewebpackfile-upload

解决方案

我找到了解决方案。require返回一个对象，图像的路径可以从其default属性中弹出：

<img src={require('path/to/img.png').default} />

推荐阅读