react web image @2x append issue

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>$15.00 <em>$ 25.00</em></h3>
                <button className="add-btn">+</button>
            </div>
        </div>
    );
}}

Above is my code let's say i'm getting images from APIs.

I have used create-react-app for creating app, now problem is when i'm opening my project in web view it is showing properly.

But from chrome console when i choose device like nexus 6 or iphone 6 whatever any device. image url will converted from

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

Automatically please help with these i need image to be fix nothing to append.

Are you using any other packages doing this for u without your notice ? — Panther, Sep 20 '17 at 06:53

score -1 · Accepted Answer · answered Jan 04 '18 at 10:32

I havn't find any solution so i came across pure jQuery string replace, Once page fully loaded will remove @2x and @3x from image src.

$(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+$)/, '$1');
        });
        }, 0);
    });

Hope this will help someone needed. Peace out:)

react web image @2x append issue

1 Answers1