It took me a long time trying to figure out what the problem is, but can't find anything wrong. Please help!
1. I made a html file, with quite a number of links to images (those are actually in-line math equations).
2. I uploaded the html file together with the images (all in a folder) to Canvas
3. I embedded the html file in a Canvas page by using this code:
<p><iframesrc="https://myinstitute.instructure.com/courses/888/files/1234/download" width="100%" height="600"></iframe></p>
4. Almost everything shows correctly, except a couple of images, they are automatically changed to some other images in the same folder. For example image014.png is changed to image008.png, image015.png is changed to image009.png. I have >20 images, only 3 or 4 automatically changed, the others are fine.
I paste a screenshot of a Canvas page below.