Отображение локальных изображений с использованием переменных react js

Question

У меня есть документ в моей базе данных:

doc = {
    _id: "11234324",
    image: "myimage.png"
}

Я хочу отобразить myimage.png, который существует локально:

Путь = "/Users/xxx/go/src/github.com/xxx/goapp/files/myImage.png"

Я старался:

<img src={path+doc.image}/>

Это не работает. Я даже не могу использовать переменную внутри функции require ().

Любые решения, как это решить?

javascript node.js reactjs react-native

0

moustafa 28 Окт 2019 в 21:20

Answer 1

Образы файловой системы не отображаются в большинстве современных браузеров по соображениям безопасности.

НО вы можете использовать input type = 'file', затем загрузить данные, а затем отобразить изображение. Вот как работает некоторая реакция-обрезка.

1

farvilain 28 Окт 2019 в 21:25

Answer 2

Этот локальный образ существует где-то в файловой системе вашего устройства или в файловой системе вашего проекта? В первом случае вам нужно будет использовать что-то вроде react-native-fs. Во втором случае вам нужно специально require каждое изображение, которое вы хотите использовать в своем проекте. Передача переменных динамически не сработает, поскольку require требует действий во время сборки, а не во время выполнения.

1

Max 29 Окт 2019 в 00:17

Answer 3

Вы не можете показать файл, который находится за пределами проекта, используя require, вы должны поместить файл в проект или в облачное хранилище. если вы поместите его в проект, вы можете использовать такой код, как

const doc = {
    _id: "11234324",
    image: "myimage.jpg"
};
const path = '../images/'

А также

<img src={require(path+doc.image)}/>

1

Kazi Hasan Ali 29 Окт 2019 в 09:27

Я понял это. Спасибо

–

moustafa

29 Окт 2019 в 14:36

Можете ли вы поставить правильный ответ, если считаете, что это вам помогло

–

Kazi Hasan Ali

29 Окт 2019 в 14:46

Отображение локальных изображений с использованием переменных react js

3 ответа

Похожие вопросы

Новые вопросы

javascript