标签: image-loading

我正在使用 GatsbyJS starter https://www.gatsbyjs.org/starters/codebushi/gatsby-starter-forty/并需要在页面上显示目录中的所有图片。Gatsby 推荐的导入媒体的方法是使用import语句，但这会导致在构建后将哈希值添加到文件名中。例如： /static/pic09-d59e4b49832baeb9c62a7a9d6c070f8c.jpg

如果我从目录中检索所有文件名并尝试用它创建<img>元素src={fileName}，则会产生空图像，因为文件名与服务器中已附加哈希值的文件名不匹配。

请推荐一个优雅的解决方案来解决这个问题。我的备份计划是将所有内容放入static未添加哈希值的目录中，但 Gatsby 文档不推荐这样做：https://www.gatsbyjs.org/docs/static-folder/

这就是我现在所拥有的：

import React from 'react'
import Layout from '../components/layout'

class Gallery extends React.Component {
    render() {
        const images = [];
        const req = require.context('../assets/images/signboards', false);
        req.keys().forEach(function (key) {
            images.push(key.substr(1));
        });
        return (
            <Layout>
                <div id="main">
                    <section className="spotlights">
                        <section>
                            {images.map((image) => {
                                return (
                                <div className="image">
                                <img src={'../assets/images/signboards' + image} alt="" />
                            </div>
                                )
                            })}
                        </section>
                    </section>
                </div>
            </Layout>
        )
    } …

在我的网站的主页上,我想展示很多具有相当大图像的产品.目前页面加载时间太长,实际上超时并且页面无法显示!

在MVC中,或者只是ASP.NET,我如何异步加载图像？基本上我想要做的是显示产品的细节,只显示一个小的加载图像,例如ajaxload.info.直到图像加载.

我假设这将需要一些javascript/jQuery ...

我得到了一个jQuery脚本,它在某个时间间隔将数据附加到"holder".数据如下所示:

<div class="item-box etc etc"> <img src="data.png"> </div>

我一次加载50张图片,我的目标是在fadeIn加载每张图片时制作它们.

我尝试过以下方法:

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

小提琴:http://jsfiddle.net/3ESUm/2/

但似乎该on方法没有load或ready方法.我没有想法了.

希望你做得很好,我正在开发一个应用程序,因为我想将一个图像从url加载到一个imageView中,我已经使用了Picasso lib,但它给了我未捕获的异常,我已经检查并调试了它是正确的网址即将到来和它的完美,我仍然面临这个问题,有人可以帮我解决这个问题吗？我的代码如下: 代码

Picasso.with(NewProfileActivity.this)
                        .load(mUser.userAvatarPath)
                        .into(iv_profile);

这里,"iv_profile"是imageView,mUser.userAvatar Path是图片网址.

我在我的应用程序中使用 CachedNetworkImage，当我在 Android 上的调试或发布中运行它时它工作正常，但是当我将 aab 上传到 Play 商店并从 Play 商店下载应用程序时，图像只是卡在占位符上.

这是我在应用程序中使用它的方式。请注意，我为占位符和错误使用了 Text 小部件，以便我可以直观地调试发布版本上的任何问题：

child: Stack(
          children: <Widget>[
            url != null
                ? CachedNetworkImage(
              imageUrl: url,
              errorWidget: (context, url, error) => Text("$error"),
              placeholder: (context, url) => Text("Loading $url"),
              imageBuilder: (context, imageProvider) => Container(
                width: double.infinity,
                height: 150,
                decoration: BoxDecoration(
                  image: DecorationImage(image: imageProvider, fit: BoxFit.fitWidth),
                ),
              ),
            )
                : Container(),

它只是停留在占位符上，看起来像这样

我在 pubspec 中使用了最新版本的 cached_network_image：

cached_network_image: ^2.4.1

到目前为止，这是我尝试帮助缩小问题范围的方法：

1. 使用Image.network(url)CachedNetworkImage 代替。当我这样做时，图像加载得很好，所以我知道这不是互联网或 url 的问题。
2. 使用flutter run --release. 这工作正常，图像加载正确。
3. 尝试多种设备。我尝试在 Android 8 …

我有一个输入文本字段,用户提供图像的源URL,例如 http://mysite/images/STARTPAGE_LOGO.gif是一个有效值.

img我的html文档中没有任何标记或其他内容.如何确定用户输入的URL中存在的图像尺寸.