با سلام
من از طریق 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 سمت فرونت میخونم جواب میده و عکسو نشون میده.
ممنونم میشم راهنمایی کنید
سلام دوست من
این مشکلتون میتونه خیلی دلیل داشته باشه که باید دونه دونه چک کنید
۱ ) میتونه از Chrome باشه چون به دلایل امنیتی کروم نمیزاره از Local چیزی Load کنید از جمله عکس و دلیلش برای لود شدن با Import کردن در ری اکت به خاطر استفاده از Live Server هست که به صورت پیشفرض زمان استارت کردن اجرا میشه برای ری اکت
۲ ) میتونه از ندادن پسوند باشه
<img src={'http://localhost:5000/api/property/images/anonymous/2'} alt="" />پسوند عکس رو تست کن
۳ ) عکس رو آپلود کن روی هاستی یا ... با لینک مستقیم بده به اپلیکیشنت ببین نشون میده یا نه
سوالی بود در خدمتم
موفق باشید