• 1398/05/04

نمایش عکس گرفته شده از backend در frontend :

با سلام

من از طریق rest api یک عکس از بک اند میگیرم که از طریق متد get عکس و دریافت میکنم بصورت زیر:

exports.get_ads_images = async (req, res) => {
    console.log('req.params', req.params.username, req.params.id);
    const dir = `public/adsImages/${req.params.username}/${req.params.id}/`;

    const options = {
        root: dir,
        dotfiles: 'deny',
        headers: {
            'x-timestamp': Date.now(),
            'x-sent': true
        }
    };

    console.log('dir:', dir);

    let imageFiles = [];

    fs.readdir(dir, function(err, files) {
        //handling error
        if (err) {
            return console.log('Unable to scan directory: ' + err);
        }
        //listing all files using forEach
        files.forEach(function(file) {
            // Do whatever you want to do with the file
            // console.log(file);
            imageFiles = [...imageFiles, file];
            res.status(200).sendFile(file, options);
        });
        console.log(imageFiles);
    });
};

روت api هم به این صورته 

app.route('/api/property/images/:username/:id').get(

property.get_ads_images

);

 

تو فرونت اند خروجی دارم و imageurl  تو ی state store ذخیره می کنم

export const getAdsImageAction = async (id, username) => {
    await getAdsImage(id, username).then(response => {
        console.log('response', response);
        if (response.status === 200) {
        setStore({
                imageUrl: response.config.url
            });
        }
    });
};

مقداری ک توش میشینه یه چیزی مثه اینه:

imageUrl:http://localhost:5000/api/property/images/anonymous/2 

حالا وقتی اونو به src مربوط به Img نسبت میدم عکس نشون نمیده

<img src={getStore('imageUrl')} alt="" />

اما اگه همون مقدار بصورت static تو src قرار بدم عکسو نشون میده

 <img src={'http://localhost:5000/api/property/images/anonymous/2'} alt="" />

هر کاری میکنم نمیشه src تگ img  رو از این url بخونم.. در صورتی که همون نگ وقتی با دستور import از یک imge سمت فرونت میخونم جواب میده و عکسو نشون میده.

ممنونم میشم راهنمایی کنید

 

  • 1398/05/06
  • ساعت 08:55

سلام دوست من

این مشکلتون میتونه خیلی دلیل داشته باشه که باید دونه دونه چک کنید

۱ ) میتونه از Chrome باشه چون به دلایل امنیتی کروم نمیزاره از Local چیزی Load کنید از جمله عکس و دلیلش برای لود شدن با Import کردن در ری اکت به خاطر استفاده از Live Server هست که به صورت پیشفرض زمان استارت کردن اجرا میشه برای ری اکت

۲ ) میتونه از ندادن پسوند باشه 

 <img src={'http://localhost:5000/api/property/images/anonymous/2'} alt="" />

پسوند عکس رو تست کن

۳ ) عکس رو آپلود کن روی هاستی یا ... با لینک مستقیم بده به اپلیکیشنت ببین نشون میده یا نه

 

سوالی بود در خدمتم

موفق باشید