Laravel如何在Blade视图获取MySQL JSON字段的图片URL？

嘿，我明白你的问题啦——你的images字段存储的是JSON格式的字符串，直接调用$boat->images拿到的是一串文本，没法直接访问里面的url属性对吧？别担心，有两种简单的方法可以解决这个问题：

方法一：在Blade视图中直接解析JSON #

你可以用PHP的json_decode()函数把JSON字符串转换成可访问的数组（或对象），然后就能轻松取出url了。示例代码如下：

@foreach($data as $boat)
    <div class="boat-card">
        <h3>{{ $boat->name }}</h3>
        @php
            // 把JSON字符串解析为关联数组
            $imageInfo = json_decode($boat->images, true);
        @endphp
        @if($imageInfo)
            <img src="{{ $imageInfo['url'] }}" alt="{{ $imageInfo['description'] }}" width="800" height="600" />
        @endif
    </div>
@endforeach

小提示：如果把json_decode()的第二个参数去掉，会返回一个对象，这时候你需要用$imageInfo->url来访问图片链接。

方法二：在模型中定义访问器（更优雅的方案） #

如果不想每次在视图里都写解析代码，推荐在Boat模型里定义一个访问器，让Laravel自动帮你把images字段转换成数组。这样在视图里就能直接使用，代码会更干净：

首先修改Boat模型：

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Boat extends Model
{
    // 定义访问器，自动解析images字段为关联数组
    public function getImagesAttribute($value)
    {
        return json_decode($value, true);
    }
}

然后在Blade视图里就可以直接调用了：

@foreach($data as $boat)
    <div class="boat-card">
        <h3>{{ $boat->name }}</h3>
        @if($boat->images)
            <img src="{{ $boat->images['url'] }}" alt="{{ $boat->images['description'] }}" width="800" height="600" />
        @endif
    </div>
@endforeach

拓展：如果以后要存储多张图片 #

要是你之后打算在images字段里存储多个图片对象（比如JSON数组），现在的访问器也能完美兼容。只需要在视图里加一层循环就行：

@foreach($data as $boat)
    <div class="boat-card">
        <h3>{{ $boat->name }}</h3>
        @foreach($boat->images as $image)
            <img src="{{ $image['url'] }}" alt="{{ $image['description'] }}" width="800" height="600" />
        @endforeach
    </div>
@endforeach

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