изображение не отображается при вставке изображения в файл jsx - PullRequest
Новая
       17

изображение не отображается при вставке изображения в файл jsx

0 голосов
/ 10 апреля 2019

Я пытаюсь вставить изображение в файл JSX и получаю его в качестве вывода ->

Image of the output I am getting

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

    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 Ответ

1 голос
/ 10 апреля 2019

Метод 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.

...