Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Move embedded code output to <img src="'OUTPUT">

Is it possible to move output value of embedded code to a <img src”>?

The embed code example:

<!-- Paste this where you want the article to appear --> 
    <div 
    data-article="programma"
    data-param-teamcode="245124"
    data-param-gebruiklokaleteamgegevens="NEE"
    data-param-aantalregels="1"
    data-param-aantaldagen="60"
    data-param-eigenwedstrijden="JA"
    data-param-thuis="JA"
    data-param-uit="JA"
    data-format-wedstrijddatum="DD-MM-YYYY"
    data-fields="thuisteam, thuisteamlogo" 
    ></div>

has the following output:

<div data-article="programma" data-param-teamcode="245124" data-param-gebruiklokaleteamgegevens="NEE" data-param-aantalregels="1" data-param-aantaldagen="60" data-param-eigenwedstrijden="JA" data-param-thuis="JA" data-param-uit="JA" data-format-wedstrijddatum="DD-MM-YYYY"
  data-fields="thuisteam, thuisteamlogo">
  <table class="article programma">
    <thead>
      <tr>
        <th><span class="string">Thuisteam</span></th>
        <th><span class="string">Thuisteam logo</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="string">De Weide 2</span></td>
        <td><span class="string">https://binaries.sportlink.com/KNVB-production-DOCUMENT/280B8A5A8EF81EC7C0CAC19267EC8683?expires=1724879248&amp;sig=a6a97cac503271e0515ce3dfd4d66b330d819e25</span></td>
      </tr>
    </tbody>
  </table>
</div>

The URL in the output is a link to an image and I would like to view the image in the browser instead of just a link.

Is it possible to move this with javascript/jquery to <img src=''>??

Didn’t try anything yet

Tags:

2

Answers


  1. 0

    If you’re asking if you can set the SRC attribute of an IMG with JQuery, sure you can –

    Say you have an image:

    You can set the src attribute like this:

    $("#image").attr("src","https://binaries.sportlink.com/KNVB-production-DOCUMENT/280B8A5A8EF81EC7C0CAC19267EC8683?expires=1724879248&sig=a6a97cac503271e0515ce3dfd4d66b330d819e25&quot;);

    You can target images by classes or IDs and unset, swap or set almost any attribute, including src.

    Login or Signup to reply.
  2. 0

    Vanilla JS – note the css to restrict the height of the logo

    window.addEventListener('load',() => { // when page has loaded
  document.querySelectorAll('[data-article=programma] span.string').forEach(span => {
    const content = span.textContent.trim();
    if (content.startsWith('https')) {
      const img = document.createElement('img');
      img.classList.add('logo');
      img.src = content;
      const td = span.closest('td');
      td.textContent = ''; // empty it
      td.appendChild(img)
    }
  })
});
    .logo { height: 100px; }
    <div data-article="programma" data-param-teamcode="245124" data-param-gebruiklokaleteamgegevens="NEE" data-param-aantalregels="1" data-param-aantaldagen="60" data-param-eigenwedstrijden="JA" data-param-thuis="JA" data-param-uit="JA" data-format-wedstrijddatum="DD-MM-YYYY"
  data-fields="thuisteam, thuisteamlogo">
  <table class="article programma">
    <thead>
      <tr>
        <th><span class="string">Thuisteam</span></th>
        <th><span class="string">Thuisteam logo</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="string">De Weide 2</span></td>
        <td><span class="string">https://binaries.sportlink.com/KNVB-production-DOCUMENT/280B8A5A8EF81EC7C0CAC19267EC8683?expires=1724879248&amp;sig=a6a97cac503271e0515ce3dfd4d66b330d819e25</span></td>
      </tr>
    </tbody>
  </table>
</div>

    jQuery:

    $(() => { // when page has loaded
  $('[data-article=programma] span.string').each(function() {
    const $span = $(this);
    const content = $span.text().trim();
    if (content.startsWith('https')) {
      const img = $('<img>', { class:'logo', src: content });
      $span.closest('td')
      .text('') // empty it
      .append(img)
    }
  })
});
    .logo { height: 100px; }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div data-article="programma" data-param-teamcode="245124" data-param-gebruiklokaleteamgegevens="NEE" data-param-aantalregels="1" data-param-aantaldagen="60" data-param-eigenwedstrijden="JA" data-param-thuis="JA" data-param-uit="JA" data-format-wedstrijddatum="DD-MM-YYYY"
  data-fields="thuisteam, thuisteamlogo">
  <table class="article programma">
    <thead>
      <tr>
        <th><span class="string">Thuisteam</span></th>
        <th><span class="string">Thuisteam logo</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="string">De Weide 2</span></td>
        <td><span class="string">https://binaries.sportlink.com/KNVB-production-DOCUMENT/280B8A5A8EF81EC7C0CAC19267EC8683?expires=1724879248&amp;sig=a6a97cac503271e0515ce3dfd4d66b330d819e25</span></td>
      </tr>
    </tbody>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search