Реагировать на веб-изображение @2 раза добавить вопрос

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>
    );
}}

Выше мой код, скажем, я получаю изображения из API.

Я использовал create-Reaction-app для создания приложения, теперь проблема в том, что когда я открываю свой проект в веб-представлении, он отображается правильно.

Но из хромированной консоли, когда я выбираю устройство, такое как Nexus 6 или Iphone 6, независимо от любого устройства. URL изображения будет преобразован из

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

Автоматически, пожалуйста, помогите с этим мне нужно изображение, чтобы исправить ничего, чтобы добавить.

1 ответ

Решение

Я не нашел никакого решения, поэтому наткнулся на чистую замену строки jQuery, как только страница полностью загрузится, удалит @2x и @3x из 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);
    });

Надеюсь, что это поможет кому-то нужно. Мир из:)

Другие вопросы по тегам