Load images in index.html

[alexandrebouttier]

Hello, I created a pwa thanks to your template, I have a problem to load the images of my splash screen, how to load them in the index.html?

[restuwahyu13]

@alexandrebouttier You can create custom component for splash screen and put it on top level of your React app, not put splash screen inside HTML

[alexandrebouttier]

hello, the problem is that I have everything to put for my ios splash screens, why can't we put them in the html?

   <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="{%=htmlWebpackPlugin.files.favicon.logo192.png%}"
    />
    <link
      rel="apple-touch-icon"
      sizes="512x512"
      href="{%=htmlWebpackPlugin.files.favicon.logo512.png%}"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2048-2732.png"
      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2732-2048.png"
      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1668-2388.png"
      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2388-1668.png"
      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1536-2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2048-1536.png"
      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1668-2224.png"
      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2224-1668.png"
      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1620-2160.png"
      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2160-1620.png"
      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1284-2778.png"
      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2778-1284.png"
      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1170-2532.png"
      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2532-1170.png"
      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1125-2436.png"
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2436-1125.png"
      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1242-2688.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2688-1242.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-828-1792.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1792-828.png"
      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1242-2208.png"
      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-2208-1242.png"
      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-750-1334.png"
      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1334-750.png"
      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-640-1136.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />
    <link
      rel="apple-touch-startup-image"
      href="assets/splash/apple-splash-1136-640.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />

[restuwahyu13]

@alexandrebouttier you can put inside file webpack/webpack.common.js in plugin WebpackPwaManifest, and call source in HTML like this

 <link
      rel="apple-touch-icon"
      sizes="192x192"
      href="{%=htmlWebpackPlugin.files.favicon.logo192.png%}"
    />

[alexandrebouttier]

I have mi like this in the webpack.common.js but when I inspect my html file the href link of my link of my image is never transform, I never used webpack so a little lost

  icons: [
        {
          src: resolve(process.cwd(), 'public/favicon.png'),
          type: 'image/png',
          sizes: '64x64',
          purpose: 'any maskable'
        },
        {
          src: resolve(process.cwd(), 'public/logo192.png'),
          type: 'image/png',
          sizes: '192x192',
          purpose: 'any maskable'
        },
        {
          src: resolve(process.cwd(), 'public/logo512.png'),
          type: 'image/png',
          sizes: '512x512',
          purpose: 'any maskable'
        },
        {
          src: resolve(process.cwd(), 'public/splash/apple-splash-2048-2732.png'),
          type: 'image/png',
          sizes: '2048x2732',
          purpose: 'any maskable'
        }
      ],

     <link
      rel="apple-touch-startup-image"
      href="{%=htmlWebpackPlugin.files.favicon.apple-splash-2048-2732.png%}"
      media="(device-width: 2048px) and (device-height: 2732px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
    />