title: How to change the image components according to the screen size?
body: <p>I have a study case:</p>
  <p>I have an image wrapped in an intro <code>div</code> for the desktop size like this:</p>
  <pre><code>&lt;div class=&quot;intro&quot;&gt;
              &lt;img id=&quot;gambar&quot; src=&quot;assets/images/image-intro-desktop.jpg&quot; alt=&quot;&quot;&gt;
          &lt;/div&gt;
  </code></pre>
  <p>then when entering the mobile file size the <code>img</code> tag will change to:</p>
  <pre><code>&lt;img id=&quot;gambar&quot; src=&quot;assets/images/image-intro-mobile.jpg&quot; alt=&quot;&quot;&gt;
  </code></pre>
  <p>So the question is how do I change the component, what js code should I use??</p>