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": [
"https://plus.unsplash.com"
]
}
},
I’m not on react but with the permissions set correctly the following code works:
<!DOCTYPE html>
<html>
<head>
<script src="index.js"></script>
</head>
<body>
<img src="https://plus.unsplash.com/premium_photo-1694473363346-31c23ae66885" width="256"/>
</body>
</html>
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
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.
1 Like
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.
5 Likes
Thankyou. It worked.
