Как получить изображение в Reactjs из API?
Я получаю изображение из API nodejs после проверки с помощью токена JWT. Я получаю ответ GET 200 ok в заголовке сети браузера, и изображение можно увидеть в предварительном просмотре, но я не могу использовать его в своем приложении.
Я точно делаю что-то не так. Пожалуйста, дайте мне знать, как правильно отображать изображение из API. На моем backend nodejs я использую res.sendFile для отправки файла.
class Card extends Component {
constructor({props, pic, token}) {
super(props, pic, token);
this.state = {
pic: pic,
};
urlFetch(data) {
fetch(data, {
headers: new Headers({
'authorization': `Bearer ${this.props.token}`,
'Content-Type': 'application/json'
})
})
.then(response => {
if (response.statusText === 'OK') {
return data // OR return response.url
}
})
}
render() {
const { pic } = this.state;
return (
<div>
<img style = {{width: 175, height: 175}} className='tc br3' alt='none' src = { this.urlFetch(pic) } />
</div>
);
}
}
@hurricane не будет. Нет связи между полученным изображением и свойством состояния pic. setState не происходит в обратном вызове urlFetch
@hurricane Как я уже упоминал, я использую JasonWebToken на моем сервере для ПОЛУЧЕНИЯ изображений.
API возвращает URL-адрес изображения или сам файл изображения?
@roxxypoxxy Я вижу изображение в сети браузера -> предварительный просмотр. Я возвращаю URL-адрес изображения в своей выборке, только если авторизация с помощью бэкэнда прошла успешно.
В своем вопросе вы говорите On my backend nodejs, I am using res.sendFile to send the file, поэтому непонятно, какие данные возвращаются с сервера. Если это json, было бы полезно, если бы вы показали нам ответ с сервера.
Внутренний сервер @roxxypoxxy отправляет только файл изображения.
Хорошо. Думаю, этот пост stackoverflow.com/questions/20035615/… может решить вашу проблему.
@roxxypoxxy я опубликовал ответ
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Это мой проверенный и проверенный метод получения данных:
componentDidMount(){
fetch('https://www.yoursite.com/api/etc', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => {
return response.text();
})
.then((data) => {
console.info( JSON.parse(data) )
this.setState{( pic: JSON.parse(data) )}
})
}
Тогда в вашем img
src = { this.state.pic }
Пожалуйста, прочтите вопрос еще раз. Это не имеет ничего общего с обещанием. Я должен использовать в своем приложении изображение, которое было отправлено из бэкэнда.
пробовали ли вы this.setState {(pic: data)} в своем методе выборки, а затем src = {this.state.pic}?
тогда как мне вызвать функцию для запроса изображения с помощью токена?
Я обычно делаю это в componentDidMount
вместо response.text и parse мы также можем сделать это .then ((response) => {return response.json ()}) .then ((data) => {console.info ("ответ" + data )})
Я нашел ответ. Вот:
Мне удалось визуализировать изображения из бэкэнд-вызова в React, используя шаблон, похожий на этот, используя: react hooks, axios и URL.createObjectURL.
Я использовал метод URL.createObjectURL(blob) и использовал конфигурацию axios { responseType: 'blob' }, чтобы убедиться, что тип данных подходит.
const ImageComponent = (imageIds) => {
const [images, setImages] = React.useState([])
React.useEffect(() => {
async function getImage (id) {
let imageBlob
try {
imageBlob = (await axiosClient.get(`/api/image/${id}`, { responseType: 'blob' })).data
} catch (err) {
return null
}
return URL.createObjectURL(imageBlob)
}
async function getImages () {
const imageArray = []
for (const id of imageIds) {
imageArray.push(await getImage(id))
}
setImages(imageArray)
}
getImages()
}, [imageIds])
return images.map((img, i) => {
return <img src = {img} alt = {`image-${i}`} key = {i} />
})
}
[Edit]: Если ваш api является защищенным маршрутом, просто убедитесь, что ваш http-клиент axios уже инициализирован токеном
var myHeaders = new Headers();
myHeaders.append("response", "image/jpeg");
myHeaders.append("psId", "");
myHeaders.append("x-api-key", "Z7dwTzHQrklCh7bvSWqhNrDTPZiLblYS");
myHeaders.append(
"Authorization",
"Bearer token"
);
var raw = "";
var requestOptions = {
method: "GET",
headers: myHeaders,
//body: raw,
redirect: "follow",
};
let response = await fetch(
"YourURL",
requestOptions
)
.then((response) => response)
.then((result) => result)
.catch((error) => console.info("error", error));
res = await response.blob();
Затем в теге изображения в вашем html или jsx файле вы можете сделать это следующим образом:
<img src = {window.webkitURL.createObjectURL(res)} />
src = { pic }должен работать.