当我在 jsx 文件中插入图像时，图像不显示答案

【问题标题】：image doesn't display when I insert image in jsx file当我在 jsx 文件中插入图像时，图像不显示
【发布时间】：2019-08-31 17:52:24
【问题描述】：

我正在尝试在 JSX 文件中插入图像，并将其作为输出-->

这就是我的代码，我试图将图像放在脚本的同一个文件夹中，也放在不同的路径中，但我仍然得到相同的图像

    import React from "react";

import { Centered } from "meteor/empirica:core";

export default class InstructionStepOne extends React.Component {
  render() {
const { hasPrev, hasNext, onNext, onPrev, game } = this.props;

//const imagePath = "/my-experiment/img/table_image.png";
//const imagePath = "table_image.png";
const imagePath = "/meteor-empirica-core-master/my-experiment/client/intro/jpg.jpg";

return (
  <Centered>
    <div className="instructions">
      <h1> Instructions 1 </h1>

          <p><b> *** PLEASE NOTE THAT YOU WILL BE QUIZZED ABOUT THE GAME BEFORE IT STARTS *** </b></p>
          <p>Each game consists of a sequence of X rounds. Each round, you have a choice between two different actions (Choice 1 and Choice 2). You will have one minute to make your decision. After both you and your partner make a decision, you will each receive a certain number of points. This table shows how many points you and your partner will earn based on your choices:</p>

          <p>In each cell, the first number is how many points you will receive, and the second how many points your partner will receive. In other words:</p>
          <ul> 
          <li> If both you and your partner select Choice 1, you each earn 5 points. </li>
          <li> If you select Choice 1 and your partner selects Choice 2, you earn 1 point and your partner earns 7 points. </li>
          <li> If you select Choice 2 and your partner selects Choice 1, you earn 7 points and your partner earns 1 point. </li>
          <li> If both you and your partner select Choice 2, you each earn 3 points. </li>
          </ul> 

          <div className="task-image">
            <img src={imagePath}/>
          </div>

        <p>
        <button type="button" onClick={onPrev} disabled={!hasPrev}>
          Previous
        </button>
        <button type="button" onClick={onNext} disabled={!hasNext}>
          Next
        </button>
         </p>
    </div>
  </Centered>
);

【问题讨论】：

您应该在 webpack 配置中正确映射您的资产文件夹。否则编译后JSX。路径会有所不同。
您是否尝试将图像放入您的 public/assets 文件夹并正确映射？
@user573014，如果此问题的答案帮助您解决了问题，请将其标记为已回答。因此，它将帮助面临同样问题的其他用户。

标签： javascript reactjs meteor jsx

【解决方案1】：

方法一

在JSX 中导入图像文件的最佳方法是在图像文件夹中创建一个index.js 文件并将文件导出为导出变量。

示例：假设assets 是您保存图像的目录，那么index.js 将如下所示。

export const myimage = require('./meteor-empirica-core-master/my-experiment/client/intro/jpg.jpg');
export const newimage = require('./meteor-empirica-core-master/my-experiment/client/intro/jpg.jpg');
.
.
.
Other images

然后你将它导入到任何组件中，如下所示

import { myimage, newimage } from "../assets";

我发现这是一种更简洁的加载图像的方法。我希望它对您的情况也有帮助。

方法二

您可以直接导入component中的图片。但是，当您有更多图像时，组件看起来会很糟糕。

const imagePath = require('./meteor-empirica-core-master/my-experiment/client/intro/jpg.jpg');

注意：您应该遵循您的目录结构。例如，../assets 是考虑到您的component 直接位于components 目录或与assets 相关的任何目录下。

【讨论】：