Блог

Я пытаюсь вставить изображение в файл 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>
);
  

Способ 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";
  

Я обнаружил, что это более чистый подход к загрузке изображений. Я надеюсь, что это поможет и в вашем случае.

Способ 2

Вы можете напрямую импортировать изображение component . Но, когда у вас будет больше изображений, компонент будет выглядеть очень плохо.

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

Примечание: вы должны следовать своей структуре каталогов. В примере, ../assets учитывая, что ваш component находится непосредственно в components каталоге или в любом каталоге относительно assets .