title: Vue.js 2: Vue cannot find files from /assets folder (v-for)
body: <p>I am using Vue-cli 3 with Webpack, and my folder structure looks like this:</p>
  
  <pre><code>/public
  /src
     /assets
        p1.jpg
        p2.jpg
  App.vue
  main.js
  </code></pre>
  
  <p>I read in several places that in order for Webpack to know where your /assets are, you should use require() if you are in Javascript land.</p>
  
  <p>I have determined that this code works:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li v-for="photo in photos" :key="photo.id"&gt;
                  &lt;img :src="photo.imageUrls.default" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      /* For webpack to resolve URLs in javascript during the build, you need the require() function */
      export default {
          data() {
              return {
                  photos: [
                      {
                          id: 1,
                          caption: 'P1',
                          series: '',
                          notes: '',
                          imageUrls: {
                              default: require('./assets/p1.jpg')
                          }
                      },
                      {
                          id: 2,
                          caption: 'P2',
                          series: '',
                          notes: '',
                          imageUrls: {
                              default: require('./assets/p2.jpg')
                          }
                      }
                  ]
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But, this does not work.  I am seeing an error in the console:
  "Error: Cannot find module './assets/p1.jpg'"</p>
  
  <pre><code>&lt;template&gt;
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li v-for="photo in photos" :key="photo.id"&gt;
                      &lt;img :src="imagePath(photo)" /&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      /* For webpack to resolve URLs in javascript during the build, you need the require() function */
      export default {
          data() {
              return {
                  photos: [
                      {
                          id: 1,
                          caption: 'P1',
                          series: '',
                          notes: '',
                          imageUrls: {
                              default: './assets/p1.jpg'
                          }
                      },
                      {
                          id: 2,
                          caption: 'P2',
                          series: '',
                          notes: '',
                          imageUrls: {
                              default: './assets/p2.jpg'
                          }
                      }
                  ]
              }
          },
          methods: {
              imagePath(photo) {
                  return require(photo.imageUrls.default);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there anybody who can help explain what is wrong in the second example?  I wish to avoid putting require() calls into the data, as that data could come from a server, and it seems weird to me to put a require() call in the data.  Thanks.</p>
  
  <p>EDIT: Per Edgar's advice below, since my images are part of the server and not the app, I can just put them into a folder in the /public folder, and not deal with require() at all.</p>