Skip to main content
Solved

Modern UI: qp-image-view element not displaying image without full file url

  • June 5, 2026
  • 2 replies
  • 45 views
MichaelShirk
Captain II
Forum|alt.badge.img+6

I’m attempting to display an image from the currently selected detail line, beside the grid, and I cannot get it to work without database manipulation.


The detail lines are a custom Photo record that have some details about the photo, and an image uploader shown in the element below. All on a simple form. This custom photo record is working as expected.

<div id="divColumnC-Img" slot="B">
	<qp-image-uploader id="ImageUrl" state.bind="Photo.ImgUrl" width="100%" height="100%" caption="Image">
	</qp-image-uploader>
</div>

 

Now, beside this other grid, I want to display the photo from the currently selected line. 
See below. 
However, it doesn’t load the image, and when I open developer tools I see this message on the console.

“app.ts:222  GET http://localhost/<SiteName>/Shedworks%20Photo%20(PHO-00009110)/login_bg3.jpg 404 (Not Found)”

qp-image-view element with the system generated value as the Image Url in the database

Here’s that image viewer element. 

<div id="divColumnC-Img" slot="A">
	<qp-image-view id="ImageUrl" state.bind="Photos.ImgUrl" width="100%" height="100%" caption="Image">
    </qp-image-view>
</div>

 

If I look in the database for that photo record, the ImgUrl value is 

Shedworks Photo (PHO-00009110)\login_bg3.jpg  

Which is a familiar framework pattern consisting of Screen Name, Record Keys, and File Name. Obviously the file handling mechanism can use this to fetch the file, because the viewer is working on the photos record. It’s just not working when I want to display it beside the grid in the qp-image-view. 
Then, I opened File Maintenance and grabbed this actual File Url from there. I updated the photo record ImgUrl field in the database with this url. 

http://localhost/<SiteName>/Frames/GetFile.ashx?fileID=f887d3af-74e0-4e62-a058-1e805f119cbc

Now the photo loads beside the grid, and it also still works on the original photo record. 
 

qp-image-view element with the full file url as the Image Url in the database

 


My conclusion is that there might be a bug that is preventing the handler from getting the real file url when the qp-image-view element is used. 

 

Does anyone have ideas or comments on this?

Best answer by MichaelShirk

After some more work on this, Claude found me the answer. 
All I needed was a simple, value-format=”attachment” attribute on the qp-image-view tag. 

Now it works fine. 

Here’s the working element.

<div id="divColumnC-Img" slot="A">
	<qp-image-view id="ImageUrl" state.bind="Photos.ImgUrl" value-format="attachment" width="100%" height="100%" caption="Image">
	</qp-image-view>
</div>

Below is what Claude had to say about it. 

“

Root Cause

The qp-image-view defaults to value-format="auto". In auto mode (qp-image-view.js:78-85), it detects the value type like this:

  1. GUID (e.g. f887d3af-74e0-4e62-a058...) → routes to attachment handler → builds ui/file?fileName=... URL ✅
  2. Base64 data → routes to binary handler ✅
  3. Anything else → routes to url handler → just creates an absolute URL ❌

Your stored value Shedworks Photo (PHO-00009110)\login_bg3.jpg is NOT a GUID, so it falls through to the url handler, which literally appends it as a path: http://localhost/<SiteName>/Shedworks%20Photo%20(PHO-00009110)/login_bg3.jpg → 404.

The composeAttachmentUrl() function (url-utils.js:52-61) actually knows how to handle your format — it builds ${siteRoot}/ui/file?fileName=${encodedValue}, which is the Acumatica REST endpoint for resolving internal attachment paths. It just never gets called because auto doesn't recognize your path pattern.

Fix

Add value-format="attachment" to the element:

 

<qp-image-view id="ImageUrl" state.bind="Photos.ImgUrl" width="100%" height="100%" caption="Image" value-format="attachment">
</qp-image-view>

This forces the control through composeAttachmentUrl(), which will build the correct URL:

 

http://localhost/<SiteName>/ui/file?fileName=Shedworks%20Photo%20(PHO-00009110)%5Clogin_bg3.jpg

That endpoint resolves Acumatica's internal ScreenName\RecordKeys\FileName path format — the same mechanism the uploader uses internally. No database changes needed.

”


Somehow this attribute didn’t make it into the documentation for the qp-image-view element. 


​@Chris Hackett any way for you to forward this to the docs team? 

Michael Shirk, Pine View Buildings, LLC - If a member helped you, please *Like* their post. If a member provided an answer to your question, please mark it as *Best Answer*.

2 replies

MichaelShirk
Captain II
Forum|alt.badge.img+6
  • MichaelShirk
  • Author
  • Captain II
  • Answer
  • June 10, 2026

After some more work on this, Claude found me the answer. 
All I needed was a simple, value-format=”attachment” attribute on the qp-image-view tag. 

Now it works fine. 

Here’s the working element.

<div id="divColumnC-Img" slot="A">
	<qp-image-view id="ImageUrl" state.bind="Photos.ImgUrl" value-format="attachment" width="100%" height="100%" caption="Image">
	</qp-image-view>
</div>

Below is what Claude had to say about it. 

“

Root Cause

The qp-image-view defaults to value-format="auto". In auto mode (qp-image-view.js:78-85), it detects the value type like this:

  1. GUID (e.g. f887d3af-74e0-4e62-a058...) → routes to attachment handler → builds ui/file?fileName=... URL ✅
  2. Base64 data → routes to binary handler ✅
  3. Anything else → routes to url handler → just creates an absolute URL ❌

Your stored value Shedworks Photo (PHO-00009110)\login_bg3.jpg is NOT a GUID, so it falls through to the url handler, which literally appends it as a path: http://localhost/<SiteName>/Shedworks%20Photo%20(PHO-00009110)/login_bg3.jpg → 404.

The composeAttachmentUrl() function (url-utils.js:52-61) actually knows how to handle your format — it builds ${siteRoot}/ui/file?fileName=${encodedValue}, which is the Acumatica REST endpoint for resolving internal attachment paths. It just never gets called because auto doesn't recognize your path pattern.

Fix

Add value-format="attachment" to the element:

 

<qp-image-view id="ImageUrl" state.bind="Photos.ImgUrl" width="100%" height="100%" caption="Image" value-format="attachment">
</qp-image-view>

This forces the control through composeAttachmentUrl(), which will build the correct URL:

 

http://localhost/<SiteName>/ui/file?fileName=Shedworks%20Photo%20(PHO-00009110)%5Clogin_bg3.jpg

That endpoint resolves Acumatica's internal ScreenName\RecordKeys\FileName path format — the same mechanism the uploader uses internally. No database changes needed.

”


Somehow this attribute didn’t make it into the documentation for the qp-image-view element. 


​@Chris Hackett any way for you to forward this to the docs team? 

Michael Shirk, Pine View Buildings, LLC - If a member helped you, please *Like* their post. If a member provided an answer to your question, please mark it as *Best Answer*.
    Chris Hackett
    Community Manager
    Forum|alt.badge.img
    • Chris Hackett
    • Acumatica Community Manager
    • June 10, 2026

    Thank you for sharing you solution with the community ​@MichaelShirk! I did pass on to a peer who is checking to see which team it needs to go to. Cheers!

    Chris ~ Let us know how we're doing: https://forms.office.com/r/xmJUdZ1QE5 - A member helped you, please *Like* their post. A member provided an answer to your question, please mark it as *Best Answer*.
      Terms & ConditionsAccessibility statement
      About Acumatica ERP system
      Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
      © 2008 — 2024  Acumatica, Inc. All rights reserved