Laravel Blade 在 HTML 属性周围添加双引号

Question

我正在编写一个动态生成 img HTML 标签的自定义 Laravel 帮助程序（我使用它来生成 img srcset 和大小属性，因为我使用 CDN）。但是在返回生成的字符串时，会在属性两边加上双引号。属性值中的空格也被分解成更小的属性。

<img src="&quot;https://ik.imagekit.io/sdqrv2ex9bq/Rosa_de_Saron/cremacao_slide.jpg?ik-sdk-version=php-2.0.0&quot;srcset=&quot;https://ik.imagekit.io/sdqrv2ex9bq/Rosa_de_Saron/tr:w-768:/cremacao_slide.jpg?ik-sdk-version=php-2.0.0" 768\w,https:="" ik.imagekit.io="" sdqrv2ex9bq="" rosa_de_saron="" tr:w-1366:="" cremacao_slide.jpg?ik-sdk-version="php-2.0.0" 1366\w&quot;="" alt="Pessoa com urna funerária" width="1366" height="768">

这是我的帮手：

function image_cdn($path, $sizes=[], $transform=[]){
        //CRIA OBJETO DO SDK
        $image = new ImageKit(
            env('IMAGEKIT_PUB_KEY'),
            env('IMAGEKIT_PRIV_KEY'),
            env('IMAGEKIT_ENDPOINT')
        );
        //ADICIONA URL DEFAULT
        $tagImg = ' src="'.$image->url([
            'path'=>$path,
            'transformation'=>$transform
        ]).'"';
        //ORDENA OS INTENS DO ARRAY
        $sizes = Arr::sort($sizes);
        //LOOP PARA GERAR CADA SIZE ENVIADO (SE HOUVER)
        foreach($sizes as $size){
            //GERA URL DA IMAGEM COM A TRANSFORMAÇÃO DO WIDTH
            $imageSet[] = $image->url([
                'path'=>$path,
                'transformation'=>[
                    ['width'=>$size],
                    $transform
                ]
            ])." $size\w";
            //GERA O ATRIBUTO SIZES
            $imageSize[] = "(max-width: $size\px) $size\px";
        }
        //SE FORAM SIZES PARA A IMAGEM ADICIONA ELES NA TAG GERADA
        $tagImg .= isset($imageSet) ? 'srcset="'.implode(',',$imageSet).'"' : '';
        //RETORNO
        return $tagImg;
    }

助手来电：

<img {{ image_cdn('cremacao_slide.jpg',[768,1366]) }} alt="Pessoa com urna funerária" width="1366" height="768">

Answer 1

您的函数正在返回一个您想要显示的完全构建的属性 as-is。但是，{{ }} blade 语法会转义您的特殊字符。

您需要使用 {!! !!} 语法打印您的值而不 blade 转义它。

<img {!! image_cdn('cremacao_slide.jpg',[768,1366]) !!} alt="Pessoa com urna funerária" width="1366" height="768">

在完整的旁注中，我看到您的函数是直接使用 env() 函数。 env() 函数应该只在配置文件中使用，配置值应该在你的函数中访问。正如现在所写的那样，如果您缓存配置（例如：在生产中），此代码将会中断。

Answer 2

如果您想继续使用 {{ }} 转义回显语法，另一种选择是将您的字符串放入 HtmlString 对象中。 e helper 方法，它转义回声的字符串，检查传递的内容是否是 Htmlable 并将直接 return 对 toHtml 的调用而不是转义内容：

function returningSomeHtml(...)
{
    return new Illuminate\Support\HtmlString(...the HTML Content...);
}


{{ returningSomeHtml(...) }}

Answer 3

我使用 Blade Components 解决了这个问题，所以它现在工作正常。由于属性值是直接加上属性的双引号，所以不会出现这个问题。

<img src="{{$imageDefault}}" {{$slot}}
@if ($imageSet)
    srcset="{{$imageSet}}"
    sizes="{{$imageSizes}}"
@endif

Laravel Blade 在 HTML 属性周围添加双引号

Laravel Blade adding double quotes around HTML attributes

laravel

laravel-blade

helper