So far I have written this code with lot of if and for statement but unable to display the images, can anyone suggest what's the proper way to achieve this goal?

{% set project = builderDetails.record %} {% set displayColumn = builderDetails.displayColumn %} {% set notFoundMessage = builderDetails.notFoundMessage %}

{% if project %} <div id="post-header"> <div class="wrap"> <div class="trail"> <div><a href="{{ 'frontpage'|page }}">Home</a></div> {% for category in post.categories %} <div><a href="{{ category.url }}">{{ category.name }}</a></div> {% endfor %}

    <div>  {{ attribute(project, displayColumn) }}</div>
</div>
<h1>  {{ attribute(project, displayColumn) }}</h1>

</div> </div> <div class="edit-post grid right"> <a href="#">Edit this project</a> </div>

<div class="cards grid"> {% if project.project_description %} <div class="card single grid center-center orange"> <div class="cell"> <h3 class="card-title">Project <strong>Modules</strong></h3> <p class="card-caption">{{ project.project_description }}</p> </div> </div> {% endif %}

{% for module in project.project_module %} <div class="card {{ module.card_orientation }}"> <div class="asset"> {% if module.project_asset == 'project_image' %} {% if module.viewing_style == 'single_image' %} <img src="{{ module.project_images | media }}" title="{{ module.project_images.title }}" loading=lazy/> {% endif %} {% if module.viewing_style == 'carousel' %} <div>Carsouel</div> {% for carousel in module.project_images %} <img src="{{ carousel.url | media }}" title="{{ module.title }}" loading=lazy /> {% endfor %} {% endif %} {% if module.viewing_style == 'gallery' %} <div>Gallery Images</div> {% endif %} {% if module.viewing_style == 'third_dimension_viewer' %} <div>3D Viewer</div> {% endif %} {% endif %}

{% if module.project_asset == 'project_video' %} <video width="100%" height="auto" controls> <source src="{{ module.video_url }}"></source> </video>
{% endif %} {% if module.project_asset == 'project_text' %} <div class="browser"> <div class="ctl"><i></i><i></i><i></i></div> <div class="grid center-center"> <div>{{ module.project_texts | raw }}</div> </div> </div> {% endif %} </div> <div class="label">{{ module.project_module_title }}</div> </div> {% endfor %} </div> {% else %} {{ notFoundMessage }} {% endif %}

You can use

{% for img in module.project_images %}
   <div>
       <img src="{{ img | media }}" title="{{ img.title }}" loading=lazy />
   </div> 
{% endfor %}

if you want to set a different path for the media manager you can follow this article: Set custom path for Media manager

Thank you Hardik_satasiya for the solution.