Add an Image Using Frontend Editing

To add an image using the Frontend Editing interface, begin by logging in to your TYPO3 installation.

1. From the FE Editing toolbar, drag either the Text with Image or the Images Only icons onto your webpage and drop them in any of the Drop Content Here fields.
2. When the Editing Form opens, give the content element a title in the header field. If you would like the header to also serve as a link, click on the Link icon and select the page, file, external URL, or email address you want to link to.
3. Click on the Media tab. 
4. Click on the Browse for Files icon and navigate to the folder in which images are kept. If the image you want to use is in the folder, simply click on it.
5. You can upload a new image by clicking on the Browse for Images button (towards the bottom of the form). Navigate on your local computer to the image desired and then click the Upload Files button.
6. If you want the image to serve as a link, click the link button and select the desired action for the link.
7. It is good practice to give the image an Alternative Text and a Title Text.
8. Save and close your work when you're done.
9. If you need to edit the image, click on the Edit icon in the Frontend.
10. Click on the Media tab when the Editing Form opens and make your changes. Save your work when you're finished.