Изображения, не отображаемые в IOS Safari или Chrome после развертывания
Динамический рендеринг listItems реагирует, когда URL фонового изображения поступает через props/redux. См. Компонент ниже для listItem:
import React, {Component} from 'react';
import {connect} from 'react-redux'
import {styleItem} from './style';
import {selectRestuarant} from './../../../ducks/reducer';
import './ListItem.css';
class ListItem extends Component {
constructor(props){
super(props);
}
componentDidMount() {
console.log(this.props)
}
componentWillReceiveProps(nextProps) {
console.log(this.props)
}
comonentWillUpdate(nextProps, nextState) {
console.log(this.props)
}
render() {
// build restaurant object to pass props
const thisRestuarant = {
name: this.props.name,
backgroundImageURL: this.props.backgroundImageURL,
category: this.props.category,
contact: this.props.contact,
location: this.props.location,
distance: this.props.distance
}
var itemStyle = {
backgroundImage: `linear-gradient(to top, rgb(49,49,49)
0px, rgba(255,255,255,0), rgba(255,255,255, 0.3) 180px,
rgba(255,255,255,0)),
url("${thisRestuarant.backgroundImageURL}")`
}
return (
<div style={itemStyle} className="listItem" onClick={() =>
this.props.selectRestuarant(thisRestuarant)} >
<div className="listItemTextContainer" >
<div className="listItemText" >
<span className="itemName nameFont" >
{this.props.name}
</span>
</div>
<div className="listItemText" >
<h2 className="itemCat catFont" >
{this.props.category}
</h2>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => state;
export default connect(mapStateToProps, {selectRestuarant})(ListItem);
На моем dev-сервере все работает нормально, даже при доступе к devserver на моем телефоне все работает так, как должно: фоновые изображения для каждого элемента с небольшим наложением градиента сверху. Но после развертывания он работает только на рабочем столе Chrome. Не работает на рабочем столе Safari или в браузере IOS.
Хостинг с использованием ZEIT, следуя инструкциям этого репо