UXP REACT img tag not working

So, Am building a uxp plugin for adobe indesign. Am using react technology. Problem is, when I do import images using react import and include them using tag nothing shows. the space is blank. This is including of if I use an external link on my tag. I noticed this also on display: Grid the page was rendering blank. What could be the reason or the solution. Here is my code.

Hi @Adobe256

You load the photo from a website.
For this, you need to set the permission in the manifest.json:

  "requiredPermissions": {
    "network": {
      "domains": [

I’m not on react but with the permissions set correctly the following code works:

<!DOCTYPE html>

  <script src="index.js"></script>

  <img src="https://plus.unsplash.com/premium_photo-1694473363346-31c23ae66885" width="256"/>



This also works for dynamic loading with Javascript:

  <img id="placeholder">
  <sp-button id="loadImage">Load image</sp-button>

document.querySelector('#loadImage').addEventListener('click', () => {
  const img = document.querySelector('#placeholder')
  img.setAttribute('src', 'https://plus.unsplash.com/premium_photo-1694473363346-31c23ae66885')
  img.setAttribute('width', '256')
1 Like

how about the other part where am not loading it from a website. ? Instead am requiring it locally from my folder

Using local images doesn’t require any special permissions:

I mean on react . js platform

Afaik this should work. I don’t see any reasons why it shouldn’t.

Did you had any issues?

on the first method including an image from the network I used your link and it worked. Now, the second method on react using webpack it has not worked. So this is how the react code looks.

Now, When I run npm run build in order to get my distro folder that contains files to be read by uxp this is what am getting.

On my plugin no image is loaded. the screen is blank. The name alien.jpg is replaced by that hash . I tend to think issue is on the webpack configuration but I can’t point out where. All my image loaders are correct.

Where does this index.js come from at the beginning of the path?

That is an issue with the webpack config in Adobe’s InDesign React starter.

You need to add a publicPath: “./“ to the output options for this to work. Cf. https://github.com/pklaschka/uxp-indesign-samples/blob/main/plugins/react-swc-sample/webpack.config.js.


Thankyou. It worked.

When you run Webpack to build your project, it processes your source code and generates an output bundle, often named something like index.js.
It can be any name depending on what you set on the output section.