title: How do I reference an image inside the Setup function in the Composition API in Vue 3?
body: <p>How do I reference an image in the Setup function in the Composition API? The path is '../assets/pic.png'</p>
  <p>If I use the path directly inside the template, as the src in an img tag, the image displays on the page. When I inspect it, it shows the image name, followed by an id, then the file extension e.g: “/img/pic.123456.png”. I <em>can</em> do it like this to get what I want, but it doesn’t seem like the correct way of doing things in Vue.</p>
  <p>I’m thinking it should be something like:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;img src=&quot;pic&quot;&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  import { ref } from 'vue'
  export default {
  
      setup(){
  
          const pic = ref('../assets/pic.png')
  
          return  { pic }
      }  
  
  }
  
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  <p>I believe it would work like this in the Options API (without ‘ref’, of course). I can’t get it to work with the Composition API. I'm thinking it may be something to do with the 'id'. Also how would I reference images in an array?</p>
  <p>Thanks.</p>