反应网络图像@2x 追加问题

Question

class ProductComponent extends Component {
render() {
    var url = 'http://via.placeholder.com/150x150';
    return (
        <div>
            <figure><img src={url} alt=""/></figure>
            <div className="prod-dtl">
                <span><img src={canada_logo} alt=""/> Williamsburg tote bag iPhone America…</span>
                <h3>.00 <em>$ 25.00</em></h3>
                <button className="add-btn">+</button>
            </div>
        </div>
    );
}}

以上是我的代码，假设我从 API 获取图像。

我已经使用 create-react-app 创建应用程序，现在的问题是当我在 Web 视图中打开我的项目时它显示正确。

但是从 chrome 控制台，当我选择像 nexus 6 或 iphone 6 这样的设备时，无论任何设备。图片 url 将从

转换而来

http://via.placeholder.com/150x150 => http://via@2x.placeholder.com/150x150

请自动帮助解决这些问题，我需要修复图像，无需附加任何内容。

Answer 1

我没有找到任何解决方案，所以我遇到了纯 jQuery 字符串替换，一旦页面完全加载将从图像源中删除 @2x 和 @3x。

$(document).ready(function () {
        setTimeout(function () {
            $('body img').prop('src', function (_, src) {
            src = src.replace(/@2x\./, '.');         // strip if it's already there
            src = src.replace(/@3x\./, '.');         // strip if it's already there
            return src.replace(/(\.\w+$)/, '');
        });
        }, 0);
    });

希望这对需要帮助的人有所帮助。平安:)

反应网络图像@2x 追加问题

react web image @2x append issue

image

reactjs

jsx

react-image