Can Metafields process liquid code in Shopify - shopify

Question

I have a Shopify product with a metafield.
The metafield returns extra information about the product to the product page.
In particular, it returns a table of contents (product features) in a tab format - see example image below.
I want the metafield to return a specific product image as well and format this in the table.
The reason I want to do it this way is that I want to use an image map (https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap) on the product image so that when a user clicks on a product feature on the image, the table row with the relating information will be highlighted.
Below is an example of what I mean.
The DETAILS tab is a getting its information from this metafield that has 2 columns - as per the code below.
The left column (1) should return a specific product image and the right column (2) is a table with the related information - so when the user clicks on the image callout (3) the related table row is highlighted (3).
My code looks as below in the metafield.
But it just renders the liquid code - not the image.
Can metafields process liquid code or can Shopify process the liquid code after it is passed from the metafield?
Or whats the best way to do this?
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6"><!-- Image column START -->
{% for image in product.images offset:9 limit:1 %}<!-- Show specific image START -->
<img src="{{ image.src | product_img_url: 'master' }}">
{% endfor %}<!-- Show specific image END -->
</div><!-- Image column END -->
<div class="col-sm-12 col-md-12 col-lg-6"><!-- Details column START -->
<table id="product-table">
<tr>
<td>Rear view mirror</td>
</tr>
<tr>
<td>ABS Brakes</td>
</tr>
<tr>
<td>6 Speed Transmission</td>
</tr>
<tr>
<td>Lowerd Seat Height</td>
</tr>
</table>
</div><!-- Details column START -->
</div>

Answer 1

Your question is a little awkward but I will try and make a clear answer for you.
A Metafield is just a resource you assign to another resource. So in your case, a product will have some resources assigned to it. They can be strings, integer numbers or JSON. So that means your metafield can provide you with lots of extra data. An image is probably not a great candidate for Metafields. You have product images, and variant images. Hooking in other images is just asking for hard-coded trouble. You can do it, but it is a lot of responsibility to organize your images as file assets and get at them properly. Not fun. Not easy.
So when Shopify parses Liquid in your template, it is going to produce a gigantic string of HTML. That gigantic string of HTML is your Shopify store, and it goes out to the web browsers of your customers. So at the same time as Shopify turns your product.liquid into HTML, it also obeys any commands to render Metafields you select. That means you get even more data to place into your HTML. It is up to you to be organized about this. Usually you render your gigantic string of HTML then let the Javascript you include wire up click listeners and other mundane actions.
In your case, your question is not so much about Liquid and Metafields, but how to render your gigantic Shopify webpage, and then hook up the right Javascript. Since there is zero about that in your question, I will leave you with the answer that in order to make your motorcycle magic, you need to do some scripting in Javscript, and perhaps a touch of clever DOM work while Liquid renders.