Блог

Главная - Вопросы по программированию - отображение локального изображения в React нажатием кнопки и использованием его локального пути

отображение локального изображения в React нажатием кнопки и использованием его локального пути

#javascript #reactjs #image #path #local

Вопрос:

Я следую онлайн — курсу и столкнулся с непростой для меня проблемой:

Окончательный проект (с использованием React и API) берет ссылку на онлайн-фотографию в формате jpg, чтобы при нажатии кнопки она отображала эту фотографию и узнавала лица на ней. Я хочу применить это и для своих собственных локальных изображений на своем компьютере, но не смог найти способ. Мне нужно, по крайней мере, иметь возможность отображать локальное изображение, указывая его локальный путь, а затем нажимая кнопку. Пожалуйста, Помогите!

Файлы представлены следующим образом (вкратце, конечно):

App.js

 import React from 'react'
import FaceRecognition from './components/FaceRecognition/FaceRecognition';
render() {
    return (
    <div className="App">
      <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
      <FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl}/>
    </div>
    );
  }
export default App;

ImageLinkForm.js

 import React from 'react'
const ImageLinkForm = ({onInputChange, onButtonSubmit}) => {
    return (
        <div>
            <input className="f4 pa2 w-70 center" type="text" onChange={onInputChange}/>
            <button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple" onClick={onButtonSubmit}>Detect</button>
        </div>
    )
}
export default ImageLinkForm

FaceRecognition.js

 import React from 'react'
const FaceRecognition = ({ imageUrl, box }) => {
    return (
        <div className="center ma">
            <div className="absolute mt2">
                <img id="inputimage" alt="" src={imageUrl} width="500px" height="auto"/>
            </div>
        </div>
    )
}
export default FaceRecognition

Так что, как вы можете видеть imageUrl , это взято из входного текста и передано в качестве параметра FaceRecognition.js , затем оно задано как src img .
Моя проблема в том, что если я использую локальный файл, такой как ( my_image.jpg ), эта процедура не работает. Я вставляю ( my_image.jpg ) во входной текст и нажимаю кнопку, но фотография вообще не отображается.
Я даже пытался ( ./my_image.jpg ) , ( http://localhost:3000/image.jpg ), ( http://localhost/image.jpg ), ( file:///my_image.jpg ) и прочее, и прочее, но так и не преуспел.

Есть идеи, как исправить эту проблему в React? Я хочу отобразить локальное изображение, используя его путь в своем приложении, поэтому каждый раз это не фиксированное изображение. Я знаю, что использование импорта (импорт изображения из my_image.jpg ) может позволить мне импортировать определенное изображение, а затем отобразить его с помощью <img src={image} /> , но здесь приложение динамично и должно каждый раз применяться к разным изображениям в зависимости от пути, который я ввожу во входном тексте.

Заранее спасибо

Метки: