fix(runtime): handle ssr false

src/runtime/image.ts

@@ -57,8 +57,10 @@ export function createImage (context, { providers, defaultProvider, presets }: C
     }
 
     const nuxtState = context.nuxtState || context.ssrContext.nuxt
+    if (!nuxtState.data || !nuxtState.data.length) {
+      nuxtState.data = [{}]
+    }
     const data = nuxtState.data[0]
-
     data.images = data.images || {}
 
     let url = providerUrl

test/e2e/no-ssr.test.ts

@@ -0,0 +1,36 @@
+import { setupTest, createPage, url } from '@nuxt/test-utils'
+
+describe('browser', () => {
+  setupTest({
+    fixture: 'fixture/base',
+    configFile: 'nuxt.config.ts',
+    config: {
+      ssr: false
+    },
+    browser: true
+  })
+  let page
+  const requests = []
+
+  test('should render image', async () => {
+    page = await createPage()
+    page.route('**', (route) => {
+      requests.push(route.request().url())
+      return route.continue()
+    })
+    page.goto(url('/'))
+    const body = await page.innerHTML('body')
+    expect(body).not.toContain('/_/w_30/2000px-Aconcagua2016.jpg')
+    const placeholderRequest = requests.find(request => request.match('/_image/local/_/w_30/2000px-Aconcagua2016.jpg'))
+    expect(placeholderRequest).not.toBeNull()
+    const positiveRequest = requests.find(request => request.match('2000px-Aconcagua2016.jpg'))
+    expect(positiveRequest).not.toBeNull()
+    const negativeRequest = requests.find(request => request.match('1280px-K2_2006b.jpg'))
+    expect(negativeRequest).toBeUndefined()
+  })
+  test('change image location', async () => {
+    await page.click('#button')
+    const positiveRequest = requests.find(request => request.match('1280px-K2_2006b.jpg'))
+    expect(positiveRequest).not.toBeUndefined()
+  })
+})

test/e2e/browser.test.ts → test/e2e/ssr.test.ts

@@ -17,7 +17,7 @@ describe('browser', () => {
     })
     page.goto(url('/'))
     const body = await page.innerHTML('body')
-    expect(body).toContain('/_image/local/_/w_30/2000px-Aconcagua2016.jpg')
+    expect(body).toContain('/_/w_30/2000px-Aconcagua2016.jpg')
     const positiveRequest = requests.find(request => request.match('2000px-Aconcagua2016.jpg'))
     expect(positiveRequest).not.toBeNull()
     const negativeRequest = requests.find(request => request.match('1280px-K2_2006b.jpg'))