Блог

Я создал функцию, которая возвращает мне нарисованную фотографию. Я пытаюсь назначить его в качестве URL-адреса img, но вместо html-элемента он возвращает мне объект. Как я могу ссылаться на html-элемент вместо объекта?

Это функция, которая возвращает мне изображение:

 function workoutImage() {
  const images = [
    {
      img1: "./images/workout-image1.jpg",
    },
    {
      img2: "./images/workout-image2.jpg",
    },
    {
      img3: "./images/workout-image3.jpg",
    },
  ];

  const imageIndex = Math.floor(Math.random() * images.length);
  let returnImage = images[imageIndex];

  return returnImage;
}

export default workoutImage;
 

и вот компонент, в котором я пытаюсь его отобразить:

 function WorkoutsDiary() {

  let workoutImage = workoutImageDraw();

  return (
    <Container>
      <Content>
        {showWorkouts amp;amp;
          showWorkouts.map((workout, key) => (
            <Image key={key}>
              <Link to={`/exercise/`   workout.id}>
                <img src={workoutImage} alt="" />
              </Link>
            </Image>
          ))}
      </Content>
    </Container>
  );
}
 

когда я веду журнал консоли, он выглядит так:

Этот:

 return returnImage;
 

возвращает экземпляр объекта. Например, это:

 {
  img1: "./images/workout-image1.jpg",
}
 

Если вы просто хотите, чтобы он вернул свойство string для этого объекта, верните это свойство:

 return returnImage.img1;
 

В качестве альтернативы, если вы хотите вернуть весь объект целиком, просто используйте его строковое свойство в значении атрибута:

 <img src={workoutImage.img1} alt="" />
 

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

 const images = [
  "./images/workout-image1.jpg",
  "./images/workout-image2.jpg",
  "./images/workout-image3.jpg",
];
 

У вас есть массив объектов, и у вас есть разные ключи в каждом из объектов.

Это должен быть массив строк.

 const images = [
  "./images/workout-image1.jpg",
  "./images/workout-image2.jpg",
  "./images/workout-image3.jpg"
];
 

Самое простое, что можно сделать, это изменить свой workoutImage таким образом:

 function workoutImage() {
  const images = [
    "./images/workout-image1.jpg",
    "./images/workout-image2.jpg",
    "./images/workout-image3.jpg",
  ];

  const imageIndex = Math.floor(Math.random() * images.length);
  let returnImage = images[imageIndex];

  return returnImage;
}

export default workoutImage;
 

Теперь вы должны увидеть свое изображение внутри img .

 import img from workoutImage
 

и используйте изображение, подобное этому

  <img src={img} alt="" />
 

Измените эту строку :

 let returnImage = images[imageIndex];
 

Для :

     let returnImage = '';
Object.keys(images[imageIndex]).map((key) => {
  returnImage = images[imageIndex][key]
});