小编mar*_*usp的帖子

我让用户从他们的移动设备上传图像，这些图像可以是纵向或横向的。我将这些图像平铺起来，类似于 Instagram 帖子。我遇到的最大问题是肖像图像没有以 100% 的容器宽度渲染。实在是太奇怪了。

这是我拍摄的“肖像”照片的示例，并使用以下代码进行可视化：

VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.padding(.horizontal, 20)
.frame(width: UIScreen.main.bounds.width - 40)

即使我指定了宽度，它仍然呈现不正确。它应该是UIScreen.main.bounds.width - 40，与其父级宽度相同VStack

使用时GeometryReader，我的代码如下所示：

GeometryReader{geo in
    VStack{
        AnimatedImage(url: URL(string: self.mediaLink))
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: geo.size.width)
    }
}
.frame(width: UIScreen.main.bounds.width)

哪个更糟糕！

任何帮助表示赞赏！使用.fill纵横比会使图像太大，并遮挡卡中的所有内容。下面的代码没有使用GeometryReader

VStack{
    AnimatedImage(url: URL(string: self.mediaLink))
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(width: UIScreen.main.bounds.width - 40)
}
.frame(width: UIScreen.main.bounds.width - 40)

感谢 Laravel Echo、Livewire 和 AlpineJS，我看到了一系列消息。

<div class="mt-4 rounded-lg p-6"
    x-data="{{ json_encode(['messages' => $messages, 'messageBody' => '']) }}"
    x-init="
        Echo.join('demo')
        .listen('MessageSentEvent', (e) => {
            @this.call('incomingMessage', e)
        })
">
    <template x-if="messages.length > 0"> 
        <template
            x-for="message in messages"
            :key="message.id"
        >
            <div class="my-8">
                <div class="flex flex-row justify-between border-b border-gray-200">
                    <span class="text-white-600 chat-block-author"  x-text="message.user.name"></span>: <span class="text-white-800" x-text="message.body" style="margin-left:10px;"></span>
                </div>
            </div>
        </template>
    </template>
</div>

我想动态添加一个chat-block-author当呈现的消息属于登录用户时调用的类。该Message模型确实包含user_id每个项目，但我似乎无法让 AlpineJS 像使用 Blade 那样很好地处理条件逻辑。

有小费吗？

这不起作用

<template x-if="message.user_id == {{ Auth::user()->id }}">
    <div class="my-8">
        <div …