Изображения отображаются только в браузере изменения размера / перекомпоновки - PullRequest
Новая
       44

Изображения отображаются только в браузере изменения размера / перекомпоновки

0 голосов
/ 27 февраля 2019

Я пытаюсь описать следующее как можно лучше.Я рад, если вы зададите больше вопросов, чтобы приблизить меня к решению или даже в чем проблема.

Моя установка с React-приложением, SSR с Razzle, graphQL с Apollo.То же самое можно сказать и о Nextjs.

После перехода от / shop к / shop / shopdetail изображения сначала видны после изменения размера браузера или перехода обратно к / shop и в / shop / shopdetail снова.URL-адрес изображения предоставляется запросом GraphQL внутри / shopdetail .

Before resize After resize

До и после изменения размера.

Но изображения, похоже, загружаются изdev-server.

Chrome dev tools

Некоторые изображения при первом отображении, только если directct после SSR имеют MIME-тип text / plain, это нормально?

Что я пробовал:

  • с использованием тега с и без src-set
  • та же настройка с Razzle и Next
  • установить минимальную высоту в пикселях на родительском контейнере и на img
  • Различные браузеры: изображения Shopdetail отображаются Firefox, но не в Chrome и Safari

ADDED CODE (компонент изображения, которыйобрабатывает и получает все изображения): 

const ImageSrcset = ({ sizes, id, imageFormats, fit, position, data }) => {
  let srcSet = '';
  let srcSetJson = '';
  let singleImg;
  let jsonEmpty = true;

  const {
    mediathek: { backgroundColor, source, data: json }
  } = data;
  const { url: srcBeforeSlice } = source;
  const src = srcBeforeSlice.slice(9);

  // Image processing if JSON with image data from graphQL is empty
  src &&
    sizes.forEach(size => {
      const path = `/api/images/${src}?width=${size}&sizes=[${sizes}]&id=${id}&imageFormats=${imageFormats} ${size}w, `;
      srcSet = srcSet + path;
    });

  // Setting src-set from JSON graphQL data
  if (((json && Object.keys(json)) || {}).length >= 1) {
    jsonEmpty = false;
    json &&
      json.jpg.forEach((image, index) => {
        const line = `/images/${json.dir}/${image.url} ${image.w}w,`;
        index === 0 && (singleImg = `/images/${json.dir}/${image.url}`);
        srcSetJson = srcSetJson + line;
      });
  }

  const fitImage =
    fit === 'contain'
      ? {
          objectFit: 'contain',
          width: '100%',
          height: 'auto'
        }
      : fit;

  return (
    <Main backgroundColor={backgroundColor} fit={fitImage} position={position}>
      {src && jsonEmpty ? (
        // route for image-processing and pipe image back
        <img src={singleImg} srcSet={srcSet} sizes="100vw" alt={src} />
      ) : (
        // route when image URL received from GraphQL
        <img src={singleImg} srcSet={srcSetJson} sizes="100vw" alt={src} /> || null
      )}
    </Main>
  );
};

ImageSrcset.defaultProps = {
  sizes: [320, 640, 768, 1024, 1150, 1366, 1500, 1600, 1750, 1920],
  imageFormats: ['jpg', 'webp'],
  fit: {
    objectFit: 'cover',
    width: '100%',
    height: '100%'
  },
  zIndex: 'auto',
  json: {},
  src: null,
  position: 'absolute'
};

const IMAGE_QUERY = gql`
  query image($id: ID!) {
    mediathek(id: $id) {
      _id
      source {
        url
      }
      backgroundColor
      data
      order
    }
  }
`;

export default graphql(IMAGE_QUERY, {
  options: props => ({ variables: { id: props.id } }),
  props: ({ data }) => ({
    data
  })
})(ImageSrcset);
...