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-react-app来创建应用,现在的问题是当我在网络视图中打开我的项目时它显示正确。
但是当我选择像nexus 6或iphone 6这样的设备时,无论是任何设备,都可以从Chrome控制台获取。图片网址将从
转换而来http://via.placeholder.com/150x150 =&gt; http://via@2x.placeholder.com/150x150
自动请帮助我这些我需要的图像来修复任何内容。
答案 0 :(得分:-1)
我找不到任何解决方案,所以我遇到了纯jQuery字符串替换,一旦页面完全加载将从图像src中删除@ 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+$)/, '$1');
});
}, 0);
});
希望这会帮助有需要的人。和平了:))