#Image Not Displaying

16 messages · Page 1 of 1 (latest)

bronze junco
#

First off, you're doing this;

src={`http://127.0.0.1:8000/api/${item.image}`}

Why not just send the correct path from your backend? The api prefix doesn't make sense here. This will also fail when you actually deploy your site. File URLs are built-in the storage; https://laravel.com/docs/10.x/filesystem#file-urls
So then it would be something like this;

$url = Storage::disk('public')->url($path);
eternal abyss
# 

        $products = Product::orderBy('created_at', 'DESC')->get();

        if ($products->isEmpty()) {

            return response()->json([
                'error' => 'No Product Awailable'
            ], 404);

        }

        return response()->json([
            'products' => $products
        ], 200);
#

this is how i am fetching the products

bronze junco
#

To elaborate a bit more, storing the file returns a path, that's the path you should be concerned with and store in your database. So you'd do something like this;

$path = Storage::disk('public')->put($destinationPath, file_get_contents($image));

$product->image = $path;
$product->save();
#

Then you just need an accessor which returns the URL

use Illuminate\Database\Eloquent\Casts\Attribute;

class Product extends Model
{
  protected $appends = ['image_url'];

  public function imageUrl(): Attribute
  {
    return Attribute::make(
      get: fn (mixed $value, array $attributes) => Storage::disk('public')->url($attributes['image'])
    );
  }
}
eternal abyss
#

let me refactor my code

eternal abyss
#

not working

bronze junco
#

Okay.. so..? 😅 Have you linked your storage disk? What's the error? Is the path correct? Did you read through the docs?

eternal abyss
# 
 $products = Product::orderBy('created_at', 'DESC')->get();


        if ($products->isEmpty()) {

            return response()->json([
                'error' => 'No Product Awailable'
            ], 404);

        }

        foreach ($products as $product) {

            if (Storage::disk('public')->exists($product->image)) {
                
                $path = Storage::disk('public')->url($product->image);

                $product->image = $path;
            }

        }

        return response()->json([
            'products' => $products
        ], 200);
#

i have linked the storage

# 
 const catogory = catogories.map((item, key) => (
    <tr key={key}>
      <th scope="row">{key + 1}</th>
      <th>
        <img src={`${item.image}`} className="w-50 h-50" alt={item.name} />
      </th>
      <td>{item.name}</td>
      <td>{item.selling_price}</td>
      <td>{item.original_price}</td>
      <td>{item.featured}</td>
      <td>{item.popular}</td>
      <td>{item.status}</td>
      <td>{item.qty}</td>
      <td>{item.description}</td>
      <td>
        <Link
          to={`/admin/edit-catogory/${item.id}`}
          className="btn btn-primary btn-sm"
        >
          Edit
        </Link>
      </td>
      <td>
        <button
          className="btn btn-danger btn-sm"
          onClick={(e) => deleteData(e, item.id)}
        >
          Delete
        </button>
      </td>
    </tr>
  ));
bronze junco
#

So yeah, your URL is incorrect.

#

And like I mentioned, you probably want an accessor

eternal abyss
#

let me refactor it one more time