No 'Access-Control-Allow-Origin' error but image is rendered
The scenario A errors appear to be due to you performing a cross domain http request for an image without sending proper CORS headers (client and server side). If your site is also hosted at that local address and port I would make the image urls rooted like /demo/images/main/1.jpg as this will ensure they are hitting the same domain and scheme you are using to hit your site. The error that the console is throwing is telling you that the request for the image was made with an Origin header of null but although a valid response was received it did not contain an Access-Control-Allow-Origin response header with value * or null. If you are in control of the server, supplying * for that response header should pass CORS.
If you try and navigate directly to the image path in chrome, does it work http://127.0.0.1:8887/demo/images/thumbnail/1.jpg? If not then there is no hope of it working in an img tag.
If you open chrome dev tools and go to the network tab and then reload the page (enable preserve log checkbox), do you see any resources coming back red (non 200 / 304 status code)? If so, investigating the response headers and content of those requests could lead you to an answer.
Scenario a and b seem to be different issues. B seems like you may possibly be serving the images with an incorrect content-type or perhaps something with your modal CSS is hiding the image (doesn't explain where the weird police text is coming from). If you can embellish on what you are using server side to open the port and serve the images I might be able to help more. If this is node with express and express.static on the images directory, it should just work so long as your paths line up.
Additional:
- Ensure your page is using HTML5 doctype (bootstrap requirement) -
<!DOCTYPE html> - Try setting content type of your HTML page to UTF8 via meta charset
tag.