PHP中图片滤镜已存入数据库但无法在页面正常显示的问题

Hey there, let's get that filter working properly! The core issue here is that you're not passing the $tweet->filter variable to the class attribute of your regular tweet images (the non-retweet ones). Let's break this down step by step:

1. The Immediate Fix: Add the Filter Variable to Regular Tweet Images #

Looking at your code, the retweeted image correctly uses class="'.$tweet->filter.'", but the regular tweet image has an empty class="" attribute. Here's the problematic section:

((!empty($tweet->tweetImage)) ? '<!--tweet show head end-->
 <div class="t-show-body">
 <div class="t-s-b-inner">
 <div class="t-s-b-inner-in">
 <img src="'.$tweet->tweetImage.'" class="" data-tweet="'.$tweet->tweetID.'"/>
 </div>
 </div>
 </div>
 <!--tweet show body end-->
 ' : '')

Change the empty class="" to include the filter variable:

((!empty($tweet->tweetImage)) ? '<!--tweet show head end-->
 <div class="t-show-body">
 <div class="t-s-b-inner">
 <div class="t-s-b-inner-in">
 <img src="'.$tweet->tweetImage.'" class="'.$tweet->filter.'" data-tweet="'.$tweet->tweetID.'"/>
 </div>
 </div>
 </div>
 <!--tweet show body end-->
 ' : '')

This will apply the stored filter class to your regular tweet images, just like it does for retweeted ones.

2. Additional Checks to Ensure Everything Works #

Even after fixing the class attribute, let's verify a few more things to avoid hidden issues:

• Confirm the filter value exists: Add var_dump($tweet->filter); inside your foreach ($tweets as $tweet) loop to make sure the database is returning a valid CSSgram class (like _1977, aden, brooklyn, etc.). If it's empty or NULL, double-check your database schema and the code that saves the filter to the database.
• Verify CSSgram is loaded: Make sure you've included the CSSgram stylesheet in your page's <head> section. For example:

  <link rel="stylesheet" href="css/cssgram.css">
  

  Ensure the file path matches where you've stored CSSgram on your server.
• Check for class conflicts: Use your browser's developer tools (Inspect Element) to confirm the filter class is being applied to the image, and that no other CSS rules are overriding the CSSgram filter styles.

3. Quick Test #

After making the fix, post a new tweet with a filter, then view the page source to confirm the image tag has the correct class (e.g., <img src="your-image.jpg" class="brooklyn" data-tweet="123">). If the class is present and CSSgram is loaded, the filter should display correctly.

内容的提问来源于stack exchange，提问作者Distortion