Openlayers unable to pass innerHTML content

I am new to OpenLayers. Have a list of images and its sequence to build full image. But does not have any coordinates. So I created two div: one for map (as outer div) and another for displaying image table.
When map is used, page is coming blank.

Below html code:

<body>
    <div id="map" class="map" style="border: 1px;">
        <div id="im"> </div>
    </div>
    <script src="main.js"></script>
 </body>

main.js code:

    var imgSrc = [
    image.a0, image.a1, image.a2, image.a3, image.a4, image.a5, image.a6, image.a7, image.a8, image.a9, 
];
        var image1 = getTable();
        var map = new Map({
            layers: [
              new ImageLayer({
                source: image1
                }),
                
            ],
            target: 'map',
            view: new View({
                center: [0,0],
                zoom: 1,
                maxZoom: 8,
              }),
        });
        //---------
           // getTable();
        //document.getElementById('im').innerHTML = function(){
            function getTable(){
                var count = 0;
                document.getElementById('im').innerHTML = function(){
            function toTable(){
                var i, html = "";
                for(i=0; i<15; i++){
                    html += toTr(i);
                }
                return "<table cellspacing='0' cellpadding='0'>" + html +"</table>";
            }
        
            function toTr(rows){
        
                return "<tr>" + toTd() + "</tr>";
            }
        
            function toTd(){
                var i, td = "";
                for(i=0; i<10; i++){
                    var filePath = count+"_Tile_2.bmp";
                    //alert(filePath)
                    td += "<td style='border:none;'><img src=\"" + imgSrc[count] + "\" /></td>";
                    count += 1;
                }
                return td;
            }
            return toTable();
            }();
        }

If I call just getTable() and comment out the ol code then I am able to get the image correctly.

Any help is appreciated.

Solution

You can't just put images into the map target and expect it to work. OpenLayers will do this for you. I made an example below where one image is divided in four parts and OpenLayers is used to display it. See the codesandbox link at the end for a working implementation.

You need to name the images according to the x/y/z positions where you want to display them. In this case I have 5 images.

sintel-0-0-0.png 
sintel-1-0-0.png 
sintel-1-0-1.png 
sintel-1-1-0.png
sintel-1-1-1.png

The first one is a lower resolution image, the other four are the complete image that has been cut up. The first number is the zoom level, then x and y position.

import "./styles.css";
import "ol/ol.css";
import Map from "ol/Map.js";
import TileGrid from "ol/tilegrid/TileGrid.js";
import View from "ol/View.js";
import { Projection } from "ol/proj.js";
import { Tile as TileLayer } from "ol/layer.js";
import { XYZ } from "ol/source.js";
import { getCenter } from "ol/extent.js";

const imageSize = [1920, 1080];
const extent = [0, 0, imageSize[0], imageSize[1]];
const projection = new Projection({
  code: "custom-image",
  units: "pixels",
  extent: extent
});

const layer = new TileLayer({
  source: new XYZ({
    tileGrid: new TileGrid({
      minZoom: 0,
      maxZoom: 1,
      resolutions: [2, 1],
      tileSize: [imageSize[0] / 2, imageSize[1] / 2],
      extent: extent
    }),
    url: "/data/sintel-{z}-{x}-{y}.png",
    projection: projection
  })
});

const map = new Map({
  layers: [layer],
  target: "map",
  view: new View({
    projection: projection,
    center: getCenter(extent),
    resolution: 1
  })
});

https://codesandbox.io/s/image-tile-grid-ufqfo?file=/src/index.js