Error when using component type "image": TypeError: a.field.previewSrc is not a function

When setting up a field for an image URL to component type image like so:
{ name: "splash_image", component: "image" },
It throws the following error:

Uncaught TypeError: a.field.previewSrc is not a function
    at index.js:1
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at unbatchedUpdates (react-dom.development.js:24439)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
    at Object.hydrate (react-dom.development.js:27591)
    at renderReactElement (index.js:397)
    at _callee3$ (index.js:523)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21
    at _doRender (main.js?ts=1591127899533:12869)
    at doRender (main.js?ts=1591127899533:12819)
    at _callee2$ (index.js:305)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at asyncToGenerator.js:21
    at _render (main.js?ts=1591127899533:12658)
    at render (main.js?ts=1591127899533:12603)
    at next-dev.js:44
    at fouc.js:14
The above error occurred in the <ErrorBoundary> component:
    in ErrorBoundary (created by DragDropContext)
    in DragDropContext (created by ReactFinalForm)
    in ReactFinalForm (created by a)
    in a
    in Unknown (created by k)
    in div (created by FormWrapper)
    in FormWrapper (created by k)
    in k (created by on)
    in div (created by SidebarWrapper)
    in SidebarWrapper (created by on)
    in div (created by SidebarContainer)
    in SidebarContainer (created by on)
    in on
    in Unknown (created by C)
    in Unknown (created by C)
    in C (created by MyApp)
    in MyApp
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

From the docs, it looks like this has to be implemented in the field definition if it’s an image type field:

Maybe this would be a safe default? I’m not sure if it’s common to include the full image path in the content source, but that seems like it would be the typical behaviour.

Seemingly not, as the filename is saved just as a filename instead of as a full path by default, so it must expect the page itself to handle and path information

Hey there @IronSean! Yeah that first error was because previewSrc wasn’t set up on that field config, but it seems like you got that.

What is your question with previewSrc? We probably won’t provide a default just because there’s so many different ways folks need to source preview paths.