search

Azure / wordpress-linux-appservice

MIT License
110 stars 71 forks source link

Images not displayed in editor #96

Closed stevenhayles closed 1 year ago

stevenhayles commented 1 year ago

I've installed WordPress behind a CDN as described in https://learn.microsoft.com/en-us/azure/app-service/quickstart-wordpress This gave WordPress 6.3, PHP 8.2.5, nginx 1.22.1 Images in the editor are displayed as a broken image symbol and the alt text. (They display correctly on the page.) Capture

I've tried disabling all plug-ins, checked site health, swapped theme and installed the Health Check & Troubleshooting plug-in I see the same in Edge 115.0.1901.200 and Chrome 115.0.5790.171

samrueby commented 1 year ago

Are you comfortable sharing a public URL of the issue?

rabollin commented 1 year ago

@stevenhayles - Are you still facing this issue?

rabollin commented 1 year ago

@stevenhayles -this issue is already fixed, can you confirm if we can close the issue.

stevenhayles commented 1 year ago

@rabollin @samrueby apologies, I've not been paying attention. It is fixed, thanks.

stevenhayles commented 1 year ago

Fixed

dlx-GH commented 1 year ago

@stevenhayles .. Care to share what the issue was and the fix? I'm seeing mostly the same thing.. Single images display in editor, but gallery images don't.

Fresh install, disabling both smush and w3tc plugins.. No difference.

All display on the front end ok

rabollin commented 1 year ago

@dlx-GH - can you open a separate issue describing clearly what was your setup and what was the challenge being faced so that we can evaluate and fix it right. The above issue described was due to CDN not loading the files due to conflicts enforced by Alpine which might be completely different from yours.

TCLNA commented 1 year ago

Had this problem too and stumbled into this post. I'm going to try to explain the context and how I "fixed" it.

image

The issue in my case seems to be because the img has a relative src, which works in preview, but not in the editor. It is verifyable by inspecting the html, the tag will look like <img src="/wp-content/....

I tried twice, once with the Azure CDN advanced option, once without. While the procedure below works without the CDN, having this option enabled dooms you to have it absent of your editor, also if you follow through you might have images not working at all. Please only follow this if you have checked-out the CDN option. image

One possible escape if you still want the CDN, is to use Elementor editor, which seems to work.

I stumbled upon this config that could help change content urls to relative or absolute. In the /var/www/wordpress/wp-config.php file, there is this line : 

define('WP_CONTENT_URL', '/wp-content');`

This is because of the CDN option apparently. You can access the config file by connecting to your server via the SSH tool embedded in the Azure dashboard. image

cd /var/www/wordpress
nano wp-config.php

image

Set it to something like https://contoso.azurewebsites.net/wp-content, then reset your wordpress resource.

Hope that helps !

image

augustl commented 9 months ago

I also have this issue, on a managed Wordpress in Azure App Services. The steps outlined by @TCLNA fixes the issue for me also.

timblackburn commented 7 months ago

Having same problem with images broken in the block editor when CDN enabled.

victorlin commented 3 months ago

I ran into this issue when I deleted media files from the App Service and expected the links to point to CDN. The problem is that CDN links aren't applied to the editor: https://github.com/Azure/wordpress-linux-appservice/issues/160