Laravel e image loading issue

একটা প্রবলেম হচ্ছে লারাভেল সাইটে। আমার সাইট এ বই আছে আমি ওই বই এর কভার সেভ করতেছি স্টোরেজ ফোল্ডার এ এবং ছবির লিংক ডাটাবেজ এ সেভ করে রাখতেছি। কিন্তু আমি যদি ছবি চেঞ্জ করি মানে বই এডিট করে ছবি চেঞ্জ করি ঠিক মত চেঞ্জ হয়। কিন্তু ওই বই তো যেখানে দেখায় সেখানে পুরোনো ছবি দেখায়। Shift+f5 দিলে ছবি নতুন টা লোড হয়। ক্লায়েন্ট কে তো বলতে পারি না ইমেজ চেঞ্জ করলে shift+f5 দিয়ে দেখেন। এই সমস্যা থেকে বের হবার উপায় কি?

আপনার মে বি ক্যাশ জনিত সমস্যা হচ্ছে। কিন্তু ইমেজের ইউআরএল পরিবর্তন হলে তো ক্যাশে সমস্যা হওয়ার কথা না। আপনি কি ফ্রন্টেন্ডে এইচটিএমএলও ক্যাশ করছেন?

Laravel সাইটে এই সমস্যাটি মূলত ব্রাউজারের ক্যাশিং (caching) এর কারণে হয়। যখন আপনি নতুন ছবি আপলোড করেন, ব্রাউজার পুরোনো ছবি ক্যাশ থেকে লোড করে নেয়। এ থেকে মুক্তি পাওয়ার জন্য আপনি কিছু কৌশল অবলম্বন করতে পারেন যাতে নতুন ছবি সঠিকভাবে লোড হয়।

সমাধান ১: ইমেজ URL এর সাথে টাইমস্ট্যাম্প যোগ করা

একটি সহজ পদ্ধতি হলো ইমেজ URL এর সাথে একটি ইউনিক প্যারামিটার যোগ করা, যা ব্রাউজারকে বলে দেবে যে এটি একটি নতুন ফাইল। সাধারণত এটি টাইমস্ট্যাম্প বা ফাইলের আপডেট টাইম ব্যবহার করে করা হয়।

<img src="{{ asset('storage/covers/' . $book->cover_image) }}?{{ time() }}" alt="Book Cover">

এখানে ?{{ time() }} যুক্ত করা হচ্ছে, যা প্রতিবার পেজ রিফ্রেশ করার সময় একটি নতুন টাইমস্ট্যাম্প যোগ করে। এর ফলে ব্রাউজার নতুন করে ইমেজ লোড করবে, পুরোনো ক্যাশ থেকে না।

সমাধান ২: ফাইল নাম পরিবর্তন করা

যখন আপনি নতুন ছবি আপলোড করবেন, তখন ছবির নাম পরিবর্তন করতে পারেন (যেমন: টাইমস্ট্যাম্প বা ইউনিক আইডি যোগ করা)। এতে নতুন ফাইল নামের কারণে ব্রাউজার অটোমেটিক্যালি নতুন ছবি লোড করবে।

// Image uploading logic
$filename = time() . '_' . $request->file('cover_image')->getClientOriginalName();
$request->file('cover_image')->storeAs('public/covers', $filename);

// Save the new filename to database
$book->cover_image = $filename;
$book->save();

এখানে ছবির নামের সাথে time() যোগ করা হয়েছে, যা প্রতিবার ছবি পরিবর্তনের সময় একটি ইউনিক নাম তৈরি করবে।

সমাধান ৩: Cache-Control হেডার যোগ করা

আপনি ইমেজ রিসোর্সগুলোর জন্য Cache-Control হেডার সেট করতে পারেন, যাতে ব্রাউজার নির্দিষ্ট সময়ের জন্য ক্যাশ না করে বা ইমেজ আপডেট হওয়া মাত্র নতুন করে লোড করে।

Laravel এর মাধ্যমে .htaccess ফাইলে বা nginx কনফিগে Cache-Control হেডার যোগ করতে পারেন। উদাহরণস্বরূপ, Apache এর জন্য:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 0 seconds"
    ExpiresByType image/jpeg "access plus 0 seconds"
    ExpiresByType image/gif "access plus 0 seconds"
    ExpiresByType image/png "access plus 0 seconds"
</IfModule>

এই সেটিং ব্রাউজারকে নির্দেশ করবে যেন প্রতিবার ইমেজ ফাইলকে রিফ্রেশ করে।

এই পদ্ধতিগুলো ব্যবহার করে আপনার সমস্যার সমাধান করতে পারেন।

1 Like

Thanks a lot. I use the time() function.

1 Like