Is it possible to remove size from the end a responsive image path?

Question

I want to remove the -500x500 part from the image so that I can show the actual image.

Here's the complete HTML if anybody wants to take a look:

<div id="speakers_list1" class="wpb_row vc_row  mk-fullwidth-false  attched-false    vc_row-fluid  js-master-row  mk-in-viewport">


  <div style="" class="vc_col-sm-12 wpb_column column_container  _ height-full">

    <div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
      <ul>


        <li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
          <div class="item-holder">
            <div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
              <a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <img alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">

              </a>

              <div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>

            </div>

            <div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
              <a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
              </a>
              <span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam &amp; Ustadz</span>
              <div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>


            </div>


          </div>

Answer 1

A quick way(not beautiful) is to replace the src of the element

src is a attribute on the element, so you can get the value with $(obj).attr("src") or set the value with $(obj).attr("src","newValue")

Edit I created a function so you can do this multiple times with multiple objects

Either add a class to the img, you want to change or call it by an attribute.

Class: fixImage($('.removeRatio'), "-500x500") or
Attribute: fixImage($('[title="Imam Abdoulaye Ndaw"]'), "-500x500")

console.log("This was my SRC: " + $('.removeRatio').attr("src"))

function fixImage(obj, removestring)
{
obj.attr("src", obj.attr("src").replace(removestring, ""))
}

fixImage($('.removeRatio'), "-500x500")
console.log("This now IS my SRC: " + $('.removeRatio').attr("src"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speakers_list1" class="wpb_row vc_row  mk-fullwidth-false  attched-false    vc_row-fluid  js-master-row  mk-in-viewport">


  <div style="" class="vc_col-sm-12 wpb_column column_container  _ height-full">

    <div id="box-14" class="mk-employees a_margin-bottom-10 a_margin-top-10 four-column u6col u5col o0col o1col o2col o3col mk-employees-grayscale classic c_cs ">
      <ul>


        <li class="mk-employee-item a_colitem a_align-center a_display-inline-block a_float-left m_7">
          <div class="item-holder">
            <div class="team-thumbnail a_position-relative a_width-100-per a_height-100-per a_overflow-hidden rounded-true">
              <a href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <img class="removeRatio" alt="Imam Abdoulaye Ndaw" title="Imam Abdoulaye Ndaw" src="http://developer.designprowebsolutions.com/sufi-intensive/wp-content/uploads/2017/02/imam-abdoulahy-ndaw-500x500.jpg">

              </a>

              <div class="employee-hover-overlay a_m_fly-top-left a_opacity-100 "></div>

            </div>

            <div class="team-info-wrapper m_7" itemscope="itemscope" itemtype="https://schema.org/Person">
              <a class="team-member-name" href="http://developer.designprowebsolutions.com/sufi-intensive/team/imam-abdoulaye-ndaw/">
                <span class="team-member-name a_font-16 a_display-block a_font-weight-bold a_text-transform-up a_color-333">Imam Abdoulaye Ndaw</span>
              </a>
              <span class="team-member-position a_font-12 a_text-transform-up a_display-block a_color-777 a_letter-spacing-1">Imam &amp; Ustadz</span>
              <div class="team-member-desc a_margin-top-20 a_margin-bottom-10 a_display-block"></div>


            </div>


          </div>