JavaScript 调整代码用于加载 HTML 表而不是图片 (PNG)

Question

I have a piece of code which loads an image. But my new resources will all be in HTML tables instead of the image of a table. Can you please help me tweak it? I'm wondering whether it's possible. So a couple of queries will combine an image name which I have stored as png files. But my new source will be.html simple 13 by 13 tables containing some data. This is the only way I can export it from my third party program. How can I change the function below so that it will load my HTML source instead of the image?

setImageSource: function() {
  if (isProductionEnvironment) {
    document.querySelector('#result-image-1').src = `/xx/xx/images/${imageName}.png`;
  } else {
    document.querySelector('#result-image-1').src = `https://xx/xx/images/${imageName}.png`;
  }
 
}, 

Thank you for your effort

Answer 1

Ok, based on my assumption, instead of load an image, you want to load an.html file; right now you use an img tag with a src value according with the user input something like your code. Then now you wanna load html code, for that you can use iframe tag with a src value or an object tag with a data value according with the user input.

iframe https://www.w3schools.com/tags/tag_iframe.asp

object https://www.w3schools.com/tags/tag_object.asp

Something like this...

setIframeSource: function() {
  if (isProductionEnvironment) {
    document.querySelector('#result-iframe-1').src = `/xx/xx/images/${imageName}.html`;
  } else {
    document.querySelector('#result-iframe-1').src = `https://xx/xx/images/${imageName}.html`;
  }
},
setObjectData: function() {
  if (isProductionEnvironment) {
    document.querySelector('#result-object-1').data = `/xx/xx/images/${imageName}.html`;
  } else {
    document.querySelector('#result-object-1').data = `https://xx/xx/images/${imageName}.html`;
  }
},