Inserted image in TinyMCE doesn't show up on website: Troubleshooting steps
If you're encountering issues with images not displaying on your website after inserting them with TinyMCE, here are a few steps you can follow to troubleshoot the problem.
Verify the "Files URL" option
Check that the "Files URL" option is configured with an absolute URL. This will help avoid 99% of errors related to incorrect URL. You can set this option either through the Dashboard or by using the Flmngr config with the urlFiles parameter.
Inspect the HTML code
Examine the HTML source code of the webpage where the image should be displayed. Look for the <img> tag that corresponds to the image and verify the src attribute. Compare the file path specified in the TinyMCE source with the file path in the resulting page. Ensure that the image URL is correct and accessible. You can try opening the image URL directly in the browser to confirm if it load properly.
Convert relative URLs to absolute
If your TinyMCE uses relative URLs instead of absolute and this is the cause of the problem not displaying image on the resulting page, check TinyMCE configuration. Make sure that in the TinyMCE initialization script you are using, you have these lines included:
relative_urls : false,
remove_script_host : true,
document_base_url : 'http://www.example.com/path1/'This will convert all relative URLs to absolute URLs. Read more: TinyMCE - URL handling options
Check error logs
To gather more information, check the browser console for any error messages. Press F12 in your browser to open the developer tools and inspect the console for relevant errors. Additionally, it would be helpful to examine the Nginx/Apache logs on the server for any potential insights into the issue.