Javascript 图像不'；在jsx文件中插入图像时不显示

我试图在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>
);

从“React”导入React；
从“meteor/empirica:core”导入{Centered}；
导出默认类指令步骤扩展React.Component{
render（）{
const{hasPrev，hasNext，onNext，onPrev，game}=this.props；
//const imagePath=“/my experience/img/table_image.png”；
//const imagePath=“table_image.png”；
const imagePath=“/meteor empirica core master/my experience/client/intro/jpg.jpg”；
返回(
说明1
***请注意，在游戏开始前，您将被问及游戏的相关问题***

每场比赛由一系列的X轮组成。每轮，你可以在两个不同的动作之间进行选择（选择1和选择2）。您将有一分钟的时间做出决定。在您和您的伴侣做出决定后，您将每人获得一定数量的积分。此表显示了您和您的伴侣将根据您的选择获得多少积分：

在每个单元格中，第一个数字是您将获得多少分，第二个数字是您的合作伙伴将获得多少分。换句话说：


如果您和您的伴侣都选择了选项1，则每人可获得5分
如果您选择选项1，而您的伴侣选择选项2，您将获得1分，您的伴侣将获得7分
如果您选择选项2，而您的伴侣选择选项1，您将获得7分，您的伴侣将获得1分
如果您和您的伴侣都选择了选项2，则每人可获得3分


以前的
下一个

);

方法1

最好的方法是在

JSX

中导入图像文件，就是在图像文件夹中设置

index.js

文件，并将文件作为导出变量导出

示例：考虑<代码>资产是您保存图像的目录，那么<代码>索引> 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";

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

方法2

您可以直接在

组件

中导入图像。但是，当您有更多图像时，组件将看起来非常糟糕

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

---

注意：您应该遵循您的目录结构。例如，

。/assets

考虑到您的

组件

直接位于

组件

目录下，或者与

资产相关的任何目录

您应该在网页包配置中正确映射资产文件夹。其他编译

JSX

后，路径将不同。您是否尝试将图像放置在公共/资产文件夹中并正确映射？@user573014，如果此问题的答案帮助您解决问题，请将其标记为已回答。这样，它将帮助其他面临相同问题的用户。