Как отформатировать фотографии в объекте JavaScript, который будет передан в приложение React?

Question

Я создаю динамическую веб-страницу с использованием React, который извлекает информацию из файлов Javascript, которые содержат массив объектов с такими компонентами, как заголовки, описания и изображения. У меня проблема в том, что место на странице, куда должно идти изображение, не иллюстрирует изображение, а вместо этого каталог:

/ static / media / "какое бы изображение я не хотел назвать"

Я включил изображение страницы для лучшего понимания:

Я просто хочу, чтобы этот каталог был заменен реальным изображением, которое я хочу показать. Сейчас я покажу вам файл JavaScript, который содержит массив объектов (включая изображения), о которых я упоминал ранее.

import Image1 from "./blackmill.jpg"

const myData = [
    {
        id: 1,
        text1: "Title",
        text2: "Project 1",
        text3: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        image1: Image1,
    },
    {
        id: 2,
        text1: "testing",
        text2: "Project 2",
        text3: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        image1: "Hello"
    },
    {
        id: 3,
        text1: "brown",
        text2: "Project 3",
        text3: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        image1: "Hello"
    },
    {
        id: 4,
        text1: "over",
        text2: "Project 4",
        text3: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        image1: "Hello"
    }

]

export default myData;

Любой совет или помощь будут с благодарностью приняты, поскольку я новичок в React. Спасибо!

Edit1: размещение моего кода реакции, в котором отображаются изображения.

Функция визуализации Body.js: `render () {

    var text2val = this.state.importData.map(item => item.text2)
    var text3val = this.state.importData.map(item => item.text3)
    var link1val = this.state.importData.map(item => item.link1)
    var link2val = this.state.importData.map(item => item.link2)
    var imageval = this.state.importData.map(item=> item.image1)

    return(
        <div className="mainBody">
            <div className="backPain">
                <div className="holder">
                <Column1
                    image={imageval[this.state.currentIndex]} 
                    link1={link1val[this.state.currentIndex]}
                    link2={link2val[this.state.currentIndex]}>
                </Column1>

                <div className="rectHolder">
                    <div className="rectForward" onClick={()=> this.HandleCurrentIndex("inc")}>
                        <h2>Next</h2>
                    </div>
                    <div className="rectBackward" onClick={()=> this.HandleCurrentIndex("dec")}>
                        <h2>Prev</h2>
                    </div>
                </div>

                <Column2 text2={text2val[this.state.currentIndex]} text3={text3val[this.state.currentIndex]}>
                </Column2>
                </div>
            </div>
        </div>
    )
}

}

реквизиты затем передаются на страницу Column1.js:

import React from "react";
import "./Column1.css";

function Column1(props) {
    return(
       <React.Fragment>
            <div className="rectImage">
                <h3>{props.image}</h3>
            </div>
            <div className="downloadBut1">
                <h2>
                    Source
                </h2>
            </div>
            <div className="downloadBut2">
                <h2>
                    Repository
                </h2>
            </div>
        </React.Fragment> 
    )
}

export default Column1;`

Answer 1

вам не нужно просто заменить <h3>{props.image}</h3> на <img src={props.image} />?