如何在HTML+Bootstrap5中通过条件语句设置星级评价图片

我有一个基于Bootstrap 5的HTML表格，用Laravel Blade循环渲染数据。想在「Valoración（评价）」列，根据两个计算出的百分比值：($datoClase->total_calmado_movimiento/$datoClase->total_intervalos_movimiento)*100和($datoClase->total_calmado_ritmo/$datoClase->total_intervalos_ritmo)*100，通过条件判断展示不同星级图片。需求是：两个值分别大于80和90时显示5星，均低于30时显示2星，其他情况显示对应星级。我写了Blade条件代码，想确认实现是否正确。

原表格代码 #

<table class="table">
    <thead style="background-color:#9ED5C5">
        <tr>
            <th>Asignatura</th>
            <th>Hora inicio</th>
            <th>Hora final</th>
            <th>Porcentaje tranquilo movimiento</th>
            <th>Porcentaje tranquilo ritmo</th>
            <th>Valoración</th>
        </tr>
    </thead>
    <tbody>
        @foreach($datosClase as $datoClase)
        <tr>
            <th>{{$asignaturas[$loop->index]['name']}}</th>
            <th>{{$periodos[$loop->index]['time']}}</th>
            <th>{{$periodos[$loop->index]['timeFinish']}}</th>
            <th>{{($datoClase->total_calmado_movimiento/$datoClase->total_intervalos_movimiento)*100}}</th>
            <th>{{($datoClase->total_calmado_ritmo/$datoClase->total_intervalos_ritmo)*100}}</th>
            <th></th>
        </tr>
        @endforeach
    </tbody>
</table>

尝试的条件代码 #

<th>
@if ((($datoClase->total_calmado_movimiento/$datoClase->total_intervalos_movimiento)*100)>80 && (($datoClase->total_calmado_ritmo/$datoClase->total_intervalos_ritmo)*100)>80 )
    <img src="{{ asset('img/5StarsImage.png') }}">
@elseif ((($datoClase->total_calmado_movimiento/$datoClase->total_intervalos_movimiento)*100)<30 && (($datoClase->total_calmado_ritmo/$datoClase->total_intervalos_ritmo)*100)<30 )
    <img src="{{ asset('img/"2StarsImage.png') }}">
@else
    <img src="{{ asset('img/"1StarsImage.png') }}">
@endif
</th>

代码问题说明与修正版本 #

你的代码存在3个核心问题：

1. 路径语法错误：asset()函数内嵌套了多余引号，比如asset('img/"2StarsImage.png')会导致生成的图片URL无效。
2. 条件逻辑不符需求：你写的5星条件是两个值都>80，但需求是第一个>80、第二个>90，逻辑不匹配。
3. 重复计算冗余：同一个百分比在条件中重复计算多次，代码冗余且影响性能。

修正后的完整代码 #

<table class="table">
    <thead style="background-color:#9ED5C5">
        <tr>
            <th>Asignatura</th>
            <th>Hora inicio</th>
            <th>Hora final</th>
            <th>Porcentaje tranquilo movimiento</th>
            <th>Porcentaje tranquilo ritmo</th>
            <th>Valoración</th>
        </tr>
    </thead>
    <tbody>
        @foreach($datosClase as $datoClase)
            @php
                // 提前计算百分比，避免重复计算
                $porcentajeMovimiento = ($datoClase->total_calmado_movimiento / $datoClase->total_intervalos_movimiento) * 100;
                $porcentajeRitmo = ($datoClase->total_calmado_ritmo / $datoClase->total_intervalos_ritmo) * 100;
            @endphp
            <tr>
                <th>{{$asignaturas[$loop->index]['name']}}</th>
                <th>{{$periodos[$loop->index]['time']}}</th>
                <th>{{$periodos[$loop->index]['timeFinish']}}</th>
                <th>{{$porcentajeMovimiento}}</th>
                <th>{{$porcentajeRitmo}}</th>
                <th>
                    @if ($porcentajeMovimiento > 80 && $porcentajeRitmo > 90)
                        <img src="{{ asset('img/5StarsImage.png') }}" alt="5星">
                    @elseif ($porcentajeMovimiento < 30 && $porcentajeRitmo < 30)
                        <img src="{{ asset('img/2StarsImage.png') }}" alt="2星">
                    @else
                        <!-- 可根据需求补充3星、4星等中间区间的判断逻辑 -->
                        <img src="{{ asset('img/3StarsImage.png') }}" alt="3星">
                    @endif
                </th>
            </tr>
        @endforeach
    </tbody>
</table>

优化点说明 #

• 用@php块提前计算百分比变量，代码更简洁易维护。
• 修正了asset()的引号错误，确保图片路径正确。
• 调整5星条件匹配需求，补充了图片alt属性提升可访问性。
• 预留了中间星级的条件扩展位置，方便后续补充逻辑。

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