为什么我加载的页面中的图像快速出现然后消失？答案

【问题标题】：Why does the image in my loaded page quickly appear then disappear?为什么我加载的页面中的图像快速出现然后消失？
【发布时间】：2017-10-04 20:52:05
【问题描述】：

当我的页面加载时，标题中的图像会迅速出现，然后在几纳秒内神奇地消失。但有时页面加载正确，这意味着标题中的图像实际上仍然可见。我无法弄清楚为什么会随机发生这种情况。

理想情况下，页面和图像应该加载并保持可见。

我已经包含了相关的帮助程序、事件、CSS 和 HTML sn-ps，以帮助了解正在发生的事情。

在我的模板下方查找：

<template name="merchantChat">  
{{#each chatMessages}}
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" >
{{/each}}
</template>

在我的 CSS 下方查找：

img.blur{
   position: absolute;
   z-index: -1;
    width:100%;
    height:100px;
   margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
    clip: rect(5px,640px,50px,5px);
    zoom:190%;
    -webkit-filter: blur(1.3px);
    filter: blur(0.9px);
}

和我作为路由器功能的助手：

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

    chatMessages: function()
            {

            var selected = Router.current().params._id;
            return buyList.find({ _id: selected}).fetch();               
            },
    }
});

非常感谢任何帮助。

【问题讨论】：

this.photo.url 存在吗？
我假设您尝试更改 z-index？此外，没有看到其他类，这似乎是一个 CSS 问题。我会去掉所有额外的东西（例如缩放、过滤、剪辑等）并尝试将它们一一添加。
@MaximPokrovskii 是的，它存在。我可以说出来，因为有时当页面加载时它会正确显示图像，但在大多数情况下，它会出现几秒钟，例如半秒钟，然后消失。 :-(
@Daltron 是的，我尝试更改 z-index。它目前为 10，没有积极影响。也如您所建议的，尝试删除附加功能，例如：缩放、过滤器、剪辑等。仍然没有任何区别。然后我尝试从模板中省略“img-rounded and blur”类名，只留下“img-responsive”，但这并没有什么区别。我开始认为这是一个光标问题... :-(
@Daltron 此外，同样奇怪的是，当我通过 chrome 元素选项卡查找 img 元素时，该元素包含 img-responsive img-rounded blur 类。它不可见。就像他们从未存在过一样。

标签： css meteor iron-router meteor-helper

【解决方案1】：

问题与我们之前认为的 CSS 无关，而与我用来访问对象中图像的方法有关。

图像闪烁的原因似乎是因为

{{#each chatMessages}}
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" >
{{/each}}

将遍历光标，第一次显示图像，然后擦除图像以准备显示第二张图像，这永远不会出现......

为了纠正这个问题，我回顾了我是如何访问对象中的图像的：

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

       chatMessages: function()
        {
           var selected = Router.current().params._id;
           return buyList.find({ _id: selected}).fetch();               
        },
}
});

并将其更改为：

Router.route('/merchantChat/:_id', {
template: 'merchantChat',
data:{ 

       chatMessages: function()
       {    
        var selected = Router.current().params._id;
        return buyList.find({ _id: selectedBargain }).fetch().map(function(image) { return image.photo.url(); });
        },
    }
});

保留 CSS 文件原样，我将模板更改为：

<template name="merchantChat">  {{#each chatMessages}}
<img class = "img-responsive img-rounded blur" src={{this.photo.url}}"alt="thumbnail" >
{{/each}}
</template>

收件人：

<template name="merchantChat">  
{{#if chatMessages}}
<img class = "img-responsive img-rounded blur" src="{{chatMessages}}" alt="thumbnail" >
{{/if}}
</template>

现在图像总是在页面加载时显示:-)

【讨论】：