Parastoo Ebrahimi
5 سال پیش توسط Parastoo Ebrahimi مطرح شد
18 پاسخ

عدم نمایش عکس

سلام. یک 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


ثبت پرسش جدید
محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 5 سال پیش مطرح شد
0

@parastooebrahimi
سلام. کانفیگ رو به این صورت تغییر بدید :

const config = {
    headers: {  "Authorization": `Bearer ${apiToken}` }
};

علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش مطرح شد
0

خطای ۴۰۱ مربوط به Authorization هست..
چک کنید ببینید وقتی توکن رو پاس میدید، سیستم اون رو دریافت و قبول میکنه؟


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

@mohsenbostan
تغییر دادم ولی باز هم ارور دریافت میکنم...


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش آپدیت شد
0

توکن رو توی کد اول پاس میدم که وقتی لاگ میگیرم کل اسم عکس ها رو بدون هیچ مشکلی توی یک آرایه واسم میاره. ولی وقتی یک عکس رو میخوام نمایش بده ارور میده. در صورتی که همون یک عکس هم در پوست من بدون هیچ مشکلی میاره...
@ali.bayat


محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 5 سال پیش مطرح شد
0

@parastooebrahimi
با استفاده از تب Network کروم درخواست رو بررسی کند.ببینید Authorization وجود داره یا خیر.


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

خیر وجود نداره.. ولی واسه نشون دادن عکس توی تک ایمیج چجوری اتوریزیشن رو انجام بدم که با توکن هست؟

<img className="img-fluid img-thumbnail" 
                            alt="Header"  
                            src="http://localhost:5289/api/image/brand.png" // to show image

                            />

@mohsenbostan


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

الام اومدم با get عکس رو دریافت کردم.

axios.get(
                    `http://localhost:5629`, config).then(response => {
                        console.log(response)
                        this.setState({
                            HeaderImage:response.data

                        })

                    }

الان ارور ندارم دیگه ولی لاگ که میگیرم ببینم چی دریافت کردم اینه:
"�PNG
↵↵
چجوری نمایش بدم عکسو؟
@mohsenbostan
@hesammousavi
@ali.bayat


میلاد کریمی
تخصص : برنامه نویس Frontend
@mihancivil 5 سال پیش مطرح شد
0

API به شما نام عکس رو قرار هست بده یا اینکه فایل باینری عکس رو ؟


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

نام عکس رو به راحتی دریافت میکنم. در حقیقت من لینک عکس رو میخواستم تا بتونم عکس رو نمایش بدم. ولی چون ارور داد اون رو get کردم. الان باینری نمایش میده.. من میخوام عکس نمایش داده بشه..
@mihancivil


میلاد کریمی
تخصص : برنامه نویس Frontend
@mihancivil 5 سال پیش مطرح شد
0

روت عکس در همین url و پورت هست؟ نمیتونید یک آدرس ثابت درنظر بگیرید و فقط نام عکس رو جایگذاری کنید؟


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

بله روت عکس همین url و پورت هست... نه متاسفانه. هر کاری باید بکنم با همین چیزهاییه که وجود داره
@mihancivil


میلاد کریمی
تخصص : برنامه نویس Frontend
@mihancivil 5 سال پیش مطرح شد
0

یه خروجی از پاسخ API اینجا بذارید، از قسمت network


محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 5 سال پیش مطرح شد
0

@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');

Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

انجام دادم.. الان به این صورت شد:

<img class="img-fluid img-thumbnail" alt="Header" src="data:image/jpg;base64,AAAAAAAAAAAAAAAAAAAAAABTAAAAAAAAAAAAAAAAAAAAAAAAAAA=">

ولی هنوز تصویر رو نمایش نمیده!!
@mohsenbostan


میلاد کریمی
تخصص : برنامه نویس Frontend
@mihancivil 5 سال پیش مطرح شد
0

شما میتونید پسوند فایل، نام فایل و اطلاعات دیگه رو از اون پاسخ api دریافت کنید و تصویر رو نمایش بدید.


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

@hesammousavi
لطف میکنید راهنمایی کنید چه کاری انجام بدم.. همه چیو امتحان کردم ولی درست نشد


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 5 سال پیش مطرح شد
0

@mohsenbostan
راه دیگه ای نیست بشه عکسی که نیاز هست به اینکه هدر jwt داشته باشه رو نمایش داد؟ تقریبا همه چیزو امتحان کردم ولی نشد..


محسن بستان
تخصص : Senior Backend Developer
@mohsenbostan 5 سال پیش مطرح شد
0

@parastooebrahimi
برای کانفیگ مورد زیر رو استفاده کنید و دوباره تست کنید :

 responseType: 'arraybuffer' 

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام