# UXP REACT img tag not working
**URL:** https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810
**Category:** InDesign
**Tags:** uxp, javascript
**Created:** [September 12, 2023, 3:12pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810 "2023-09-12T15:12:16Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 12, 2023, 3:12pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/1 "2023-09-12T15:12:17Z")
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.
---
### Author:  [@sivar2311](https://forums.creativeclouddeveloper.com/u/sivar2311)
#### Post date: [September 12, 2023, 5:53pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/2 "2023-09-12T17:53:26Z")
Hi @Adobe256
You load the photo from a website.
For this, you need to set the permission in the `manifest.json`:
```auto
"requiredPermissions": {
"network": {
"domains": [
"https://plus.unsplash.com"
]
}
},
```
I’m not on react but with the permissions set correctly the following code works:
```auto
```
This also works for dynamic loading with Javascript:
```auto
...
![]()
Load image
...
```
```auto
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')
})
```
---
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 12, 2023, 6:22pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/3 "2023-09-12T18:22:42Z")
how about the other part where am not loading it from a website. ? Instead am requiring it locally from my folder
---
### Author:  [@sivar2311](https://forums.creativeclouddeveloper.com/u/sivar2311)
#### Post date: [September 12, 2023, 6:29pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/4 "2023-09-12T18:29:13Z")
Using local images doesn’t require any special permissions:
---
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 12, 2023, 6:31pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/5 "2023-09-12T18:31:56Z")
I mean on react . js platform
---
### Author:  [@sivar2311](https://forums.creativeclouddeveloper.com/u/sivar2311)
#### Post date: [September 12, 2023, 6:33pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/6 "2023-09-12T18:33:51Z")
Afaik this should work. I don’t see any reasons why it shouldn’t.
Did you had any issues?
---
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 12, 2023, 6:55pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/7 "2023-09-12T18:55:02Z")
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.
---
### Author:  [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)
#### Post date: [September 13, 2023, 8:08am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/8 "2023-09-13T08:08:41Z")
Where does this `index.js` come from at the beginning of the path?
---
### Author:  [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)
#### Post date: [September 13, 2023, 8:36am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/9 "2023-09-13T08:36:01Z")
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](https://github.com/pklaschka/uxp-indesign-samples/blob/main/plugins/react-swc-sample/webpack.config.js).
---
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 14, 2023, 7:20am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/10 "2023-09-14T07:20:27Z")
Thankyou. It worked.
---
### Author:  [@Adobe256](https://forums.creativeclouddeveloper.com/u/Adobe256)
#### Post date: [September 14, 2023, 7:25am UTC](https://forums.creativeclouddeveloper.com/t/uxp-react-img-tag-not-working/6810/11 "2023-09-14T07:25:25Z")
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.
