Use an ACF shortcode value that returns a url as the src for an image tag

Question

Trying to create an image that can be reused multiple times on different pages throughout the site through it's url. Currently using ACF to create an image field on a page where the file is located, from there using an ACF shortcode placed in the scr="" to output the image.

Without the img tag just using the shortcode [acf field="name" post_id="24"] it returns

http://www.example.com/wp-content/uploads/2020/07/iain-e1593698192670.jpg

Following this link provides the image in a new tab so I figure the url isn't the source of the problem.

The current set up is

<img src="[acf field="iain" post_id="24"]">

The result: the annoying broken image icon.

EDIT

Using Beaver Builder

Answer 1

Firstly, you cannot nest double quotes inside double quotes like you had them - you can either use single quotes around the shortcode, or use them for the attributes inside the shortcode.

If you are using the shortcode in a template, you need to use the do_shortcode PHP function. Otherwise it just displays the actual shortcode text on the page. In your case, it is looking for an image with a url [acf field="iain" post_id="24"], which is why you're getting a broken image.

You need to change the image source to the following:

<img src="<?php echo do_shortcode('[acf field="iain" post_id="24"]'); ?>">