Блог

Главная - Вопросы по программированию - Как указать локальный путь к изображению в img src для загрузки в react / JavaScript

Как указать локальный путь к изображению в img src для загрузки в react / JavaScript

#javascript #reactjs

#javascript #reactjs

Вопрос:

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

Пример:

 import React, {Component} from 'react';

class ImageElement extends Component {
    static displayName = 'ImageElement';

    render() {
        const {element:{defaultPath, height, width}} = this.props;
        const imagePath = 'E:/myPic/IMG_20191221_204716.jpg';
        return (
            <div>
                <img
                    src={imagePath}
                    height={height}
                    width={width}
                />
            </div>
        );
    }
}

export default ImageElement;

Chrome выдает ошибку типа
Не разрешено загружать локальный ресурс: file:///E:/myPic/IMG_20191221_204716.jpg

Я пробовал разные варианты, предложенные другими пользователями, например

  1. Охватываем локальный сервер, а затем пытаемся получить доступ к файлу
  2. c:Program Файлы (x86)googlechromeApplicationchrome.exe —разрешить доступ к файлам из файлов

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

Любые дальнейшие указания приветствуются.

Ответ №1:

не уверен, что я правильно понял ur pb, но я думаю, что вам следует добавить файл в папку src проекта ur или где-нибудь еще и импортировать изображение, подобное компоненту :

 import imagePath from "./assets/img/IMG_20191221_204716.jpg";

Комментарии:

1. да, я думаю, в этом его сомнение. ‘./’ указывает корневой каталог приложения, мы можем начать относительно с корневого каталога, начав с ‘./’ вместо полного пути.

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

3. Добавление файла в проект — это нормально, но для добавления этого файла мне нужен этот файл из моей локальной файловой системы. Я не могу вручную добавить этот файл, потому что у меня нет ни файла, ни пути к файлу заранее. Только на основе пути к файлу, например (‘E:/myPic/IMG_20191221_204716.jpg ‘) поступает динамически из API, и на основе этого мне нужно получить доступ к файлу на основе пути в моей системе

4. @Hot_Pink_Spin, я понимаю, что chrome не может загружать ресурсы из каталога приложений… Но есть ли альтернативный способ, подобный любому способу получения пути из API, поэтому, выбрав этот путь, мы можем получить доступ к изображению и поместить его в корневой каталог нашего приложения.

5. Или, может быть, вам нужно перенастроить этот api, чтобы указать на каталог приложения.

Метки: