Ion-Img not rendering image in Xcode

Ionic Framework Ionic React
1

I’m using the Ion-Img component in v7.1.1. I created a folder called ‘assets’ under the standard ‘/src’ folder. I dropped a 480x480px image into the folder. I dragged and dropped (using the shift key) the image name into the src value of the Ion-Img component (see below). When using the Ionic Extension in VScode and I have it run on the web, it renders perfectly. When I run in on IOS (simulator), it renders perfectly. When I use the extension to build it and send to Xcode, it does not render. When I use the Ionic CLI commands (ionic capacitor build ios ), it builds and sends it to Xcode without an error. When I run the xcode simulator, it does not render. When I have xcode send it to my phone, it also does not render. It seems that the build command doesn’t place the source image in the correct folder (or at all) for the Ion-Image source to pick it up. I’ve read some old post and it seems this has happened in past versions but I don’t see a workaround or fix. Any ideas on how I can get it to work?

    <IonImg
      alt="Helping Hands"
      src="/src/assets/pexels-480.png"
    />
2

When you inspect the element, what does it show? Does the image show as broken link?

Sounds like your src path is incorrect. Depending how deep your placing the ionImg component, it should be something like: ./assets/img.png or ../../assets/img.png. VSCode should show you the correct path when typing it in.

3

I had also tried entering the path by just typing it in and vscode showing me the available subdirectories. I tried it both ways. Same results. Using the Ionic VSCode Extension, when I send it to the browser, it renders perfectly. Using the same extension, when I send it to the iOS simulator (Run on IOS), it renders perfectly. The issue is when I do the build and have it open in Xcode to add it to my phone. There, it does not render at all. The only thing I can assume is that the image is not coming over during the build. Do need to place the image in a specific directory allowing the build process to pick it up and send it to xcoce? Maybe another trick?

4

I found my answer on Discord. A host by the name of Damian suggested dropping the image in the ‘dist’ folder. That worked. I figured that build would take the image in my ‘src’ folder and move it to the appropriate folder during the build. It doesn’t. To make it work in both vscode extension ‘run on web’ / ‘run on ios’ option and during the build process, I dropped the image in the same folder as the page and then made a copy in the ‘dist’ folder. It worked.

1 Like