代码

render: function () {
    return (
        <picture>
            <!-- You get the idea -->

            <source srcSet={this.props.large} media="(min-width: 1024px)" />
            <source srcSet={this.props.medium} media="(min-width: 640px)" />
            <img srcSet={this.props.small} />
        </picture>
    );
}

示例1：

<head>
    <!-- Recommended usage -->
    <script src="https://cdn.rawgit.com/scottjehl/picturefill/2.3.1/dist/picturefill.js"></script>
</head>

适用于Safari 8.0.8
适用于Chrome 45
适用于Firefox 40.0.3（仅限刷新，不适用于调整大小）

示例2：

// Use picturefill JavaScript API
componentDidUpdate() {
    picturefill();
}

适用于Safari 8.0.8（仅限调整大小，不页面加载时）
适用于Chrome 45
适用于Firefox 40.0.3（仅限刷新，不适用于调整大小）

更多信息/替代品？

Answer 1

我建议您将picturefill 3.0 RC1与mutation plugin结合使用。这样您就不需要致电picturefill();，一切都会自动完成。

这适用于任何浏览器。

Answer 2

此解决方案适用于Webpack，并实现与上面示例1 中的推荐用法相同的功能。

似乎picturefill()将在第一次渲染期间初始化（未定义src），然后在第二次渲染期间跳过（使用src定义）。

所以......在你拥有数据之前，阻止渲染图像元素似乎有效。

componentDidUpdate: function () {
    picturefill();
},

render: function () {
    return (
        <div>
            {(function () {
                // You get the idea…
                if (this.props.large === undefined) {
                    return '';
                }

                return (
                    <picture>
                        <!-- You get the idea… -->

                        <source srcSet={this.props.large} media="(min-width: 1024px)" />
                        <source srcSet={this.props.medium} media="(min-width: 640px)" />
                        <img srcSet={this.props.small} />
                    </picture>
                );
            }.bind(this)())}
        </div>
    );
}

适用于Safari 8.0.8
适用于Chrome 45
适用于Firefox 40.0.3（仅限刷新，不适用于调整大小）

更新：2016年4月28日

现在使用React进行同构渲染，所以这个解决方案对我不起作用。

由于import 'picturefill';依赖于节点中不可用的window，因此无法picturefill();。
componentDidUpdate，如下所示，在<picture>内不适用于Safari（9.0.3）。
/** * OLD */ export class MyComponent extends Component { componentDidMount() { // TODO: remove when updated https://github.com/scottjehl/picturefill/pull/556 const picturefill = require('picturefill'); picturefill(); } } /** * NEW */ // TODO: remove when updated https://github.com/scottjehl/picturefill/pull/556 if (__CLIENT__) { require('picturefill'); require('picturefill/dist/plugins/mutation/pf.mutation'); // not sure if this does anything } export class MyComponent extends Component {}策略对我来说不起作用，因为图像错误（fowi）。

<picture>
  <source media="(min-width: 640px)" srcSet={'...'} />
  <source srcSet={'...'} />

  {/* SEE: http://scottjehl.github.io/picturefill/#fowi-safari */}
  <img alt={title} />
</picture>

图片已更新为以下内容：

require('picturefill/dist/plugins/mutation/pf.mutation');

对于Safari，内容闪存仍然存在......但现在显示替代文字......

至于cortex+orig.HEAD：

此插件会自动检测任何DOM突变并自动填充新的或更改的响应图像。它还增加了对响应式图像IDL属性/属性的支持。如果你有一个高度动态的网站或SPA，你可能想要使用这个插件。（此插件不适用于IE8。）

推荐使用React + Picturefill的方法

代码

示例1：

示例2：

2 个答案: