عدم نمایش عکس
سلام. یک select tag هست که option های خودش رو از api، به آدرس api/images میگیره و هیچ مشکلی هم وجود نداره. یک تگ image هم هست که تصویر اون باید مطابق با select option انتخابی باشه. مثلا api/images/brand.png . ولی وقتی از این url استفاده میکنم ارور 401که مربوط به unauthorize هست رو دریافت میکنم.
من option های select رو با استفاده از کد زیر دریافت میکنم:
let apiToken = localStorage.getItem("token")
const config = {
headers: { Authorization: `Bearer ${apiToken}` }
};
axios.get(
`http://localhost:5289/api/image`, config).then(response => {
console.log(response.data)
this.setState({
selectListOptions: [...response.data]
})و کدی که تصویر رو میخوام نشون بدم اینه:
<img className="img-fluid img-thumbnail"
alt="Header"
src="http://localhost:5289/api/image/brand.png" // to show image
/>
چه کاری انجام بدم تا تصویر به درستی نمایش داده بشه و ارور 401 رو دریافت نکنم؟ این هم اضافه بکنم که توی postman و با bearer token ، بدون هیچ مشکلی عکس api/images/brand.png رو دریافت میکنم.
@hesammousavi
@mohsenbostan
پاسخها
18
@parastooebrahimi
سلام. کانفیگ رو به این صورت تغییر بدید :
const config = {
headers: { "Authorization": `Bearer ${apiToken}` }
};
خطای ۴۰۱ مربوط به Authorization هست..
چک کنید ببینید وقتی توکن رو پاس میدید، سیستم اون رو دریافت و قبول میکنه؟
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
@mohsenbostan
تغییر دادم ولی باز هم ارور دریافت میکنم...
توکن رو توی کد اول پاس میدم که وقتی لاگ میگیرم کل اسم عکس ها رو بدون هیچ مشکلی توی یک آرایه واسم میاره. ولی وقتی یک عکس رو میخوام نمایش بده ارور میده. در صورتی که همون یک عکس هم در پوست من بدون هیچ مشکلی میاره...
@ali.bayat
@parastooebrahimi
با استفاده از تب Network کروم درخواست رو بررسی کند.ببینید Authorization وجود داره یا خیر.
خیر وجود نداره.. ولی واسه نشون دادن عکس توی تک ایمیج چجوری اتوریزیشن رو انجام بدم که با توکن هست؟
<img className="img-fluid img-thumbnail"
alt="Header"
src="http://localhost:5289/api/image/brand.png" // to show image
/>الام اومدم با get عکس رو دریافت کردم.
axios.get(
`http://localhost:5629`, config).then(response => {
console.log(response)
this.setState({
HeaderImage:response.data
})
}الان ارور ندارم دیگه ولی لاگ که میگیرم ببینم چی دریافت کردم اینه:
"�PNG
↵↵
چجوری نمایش بدم عکسو؟
@mohsenbostan
@hesammousavi
@ali.bayat
API به شما نام عکس رو قرار هست بده یا اینکه فایل باینری عکس رو ؟
نام عکس رو به راحتی دریافت میکنم. در حقیقت من لینک عکس رو میخواستم تا بتونم عکس رو نمایش بدم. ولی چون ارور داد اون رو get کردم. الان باینری نمایش میده.. من میخوام عکس نمایش داده بشه..
@mihancivil
روت عکس در همین url و پورت هست؟ نمیتونید یک آدرس ثابت درنظر بگیرید و فقط نام عکس رو جایگذاری کنید؟
بله روت عکس همین url و پورت هست... نه متاسفانه. هر کاری باید بکنم با همین چیزهاییه که وجود داره
@mihancivil
یه خروجی از پاسخ API اینجا بذارید، از قسمت network
@parastooebrahimi
از کد زیر استفاده کنید تا اون باینری رو تبدیل کنید :
function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}و بعد میتونید این طوری استفاده کنید :
var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');انجام دادم.. الان به این صورت شد:
<img class="img-fluid img-thumbnail" alt="Header" src="data:image/jpg;base64,AAAAAAAAAAAAAAAAAAAAAABTAAAAAAAAAAAAAAAAAAAAAAAAAAA=">ولی هنوز تصویر رو نمایش نمیده!!
@mohsenbostan
شما میتونید پسوند فایل، نام فایل و اطلاعات دیگه رو از اون پاسخ api دریافت کنید و تصویر رو نمایش بدید.
@hesammousavi
لطف میکنید راهنمایی کنید چه کاری انجام بدم.. همه چیو امتحان کردم ولی درست نشد
@mohsenbostan
راه دیگه ای نیست بشه عکسی که نیاز هست به اینکه هدر jwt داشته باشه رو نمایش داد؟ تقریبا همه چیزو امتحان کردم ولی نشد..
@parastooebrahimi
برای کانفیگ مورد زیر رو استفاده کنید و دوباره تست کنید :
responseType: 'arraybuffer'