Unable to display image from database - Laravel - php

Question

I have a relationship with product and images. The user can upload many images for a product so I have a product table and product_images table.
When I try to get to fetch the image from the database, I get No image available in my view. But I am able to save to the path attribute in my database.
Why could this be happening?
product_images
id
product_id
path
Product
public function images()
{
return $this->hasMany(Image::class);
}
Image
public function products()
{
return $this->belongsTo(Product::class);
}
Controller
public function index()
{
$products = Product::where('type', 'BASIC')->inRandomOrder()->take(6)->get();
return view('home.index',compact('products');
}
$product_image = Product::create($request->all());
if ($request->hasFile('image'))
{
$request->file('image')->store('uploads/catalog/images');
// ensure every image has a different name
$file_name = $request->file('image')->hashName();
// save new image $file_name to database
$product_image->images()->update(['image' => $file_name]);
}
View
#foreach($products as $product)
#foreach($product->image as $img)
<div class="product-item men">
<div class="product discount product_filter">
<div class="product_image">
<img src="{{$img}}" alt="">
</div>
<!-- <div class="favorite favorite_left"></div> -->
<!-- <div class="product_bubble product_bubble_right product_bubble_red d-flex flex-column align-items-center"><span>offer</span></div> -->
<div class="product_info">
<h6 class="product_name">{{$product->name}}</h6>
</div>
</div>
</div>
#endforeach
#endforeach
dd($img)
ProductImage {#523 ▼
#fillable: array:3 [▼
0 => "product_id"
1 => "path"
2 => "is_main_image"
]
#connection: "mysql"
#table: null
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:6 [▼
"id" => 1
"product_id" => 1
"path" => "/Users/emmnock/laravel-ecommerce/public/uploads/catalog/ZsT4VwjWS5tLvIl0AKV6sAOxHFrwzwII5FMVUVkP.png"
"is_main_image" => null
"created_at" => "2018-03-07 10:04:34"
"updated_at" => "2018-03-07 10:04:34"
]
#original: array:6 [▶]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: true
#hidden: []
#visible: []
#guarded: array:1 [▶]
}

Answer 1

if your image is in public folder then use asset()
Here is an example
<img src="{{ asset(str_replace(app_path(),'',$img->path))}}" alt="">
also in your foreach
use below given code
#foreach($product->images as $img)
If it is storage folder then move the image to storage then use asset() or create a symlink
use asset(str_replace(app_path(),'',$img->path))
Hope this helps

Answer 2

You can't use img object to echo it. Image must have some properties like url or path, so you can output them only. Looks like you store full path (why?) inside path property.
$url = str_replace(public_path(), "", $img->path);
<img src="{{ $url }}" alt="">
If you store filename as an image property, so get url to it.
<img src="{{ Storage::url($img->path_to_file) }}" alt="">

Answer 3

Your problem is with how you store the image in the database.
$request->file('image')->store('uploads/catalog/images');
// ensure every image has a different name
$file_name = $request->file('image')->hashName();
// save new image $file_name to database
$product_image->images()->update(['image' => $file_name]);
You are using store() to save the file, then you are generating a new file name using hashName() and that is no way related to the image file that has been stored in 'uploads/catalog/images'.
The proper way would be to get the full path of the image stored returned by the store() method, and save that in the database.
$image_path = $request->file('image')->store('uploads/catalog/images');
$product_image->images()->update(['image' => $image_path]);