How to path to external (dynamic) assets with Vue-Loader / Webpack

Question

I have a project that accesses profile images dynamically from JSON retrieved from an API service. The problem is I'm having a tough time figuring out where in the file system to put these images during development and what the path should be in the JSON.

Here is a small example:

<template>
  <li :class="{'is-active': isActive}">
      <div class="responsible">
        <profile-picture :the-url="user.profilePicture" the-size="large"></profile-picture>
        {{ user.name }}
      </div>
  </li>
</template>

<script>
import ProfilePicture from '../components/ProfilePicture'

export default {
  data () {
    return {
      isActive: false
    }
  },
  props: [
    'user'
  ],
  components: {
    'profile-picture': ProfilePicture
  }
}
</script>

So, what would be the path that user.profilePicture should have and where should that file be located in the filesystem? Again, I don't want to pack the image with webpack - I want this to come from a library of images that users have uploaded. Any help is appreciated!

Jeff · Accepted Answer · 2016-03-18 19:44:54Z

1

They can go anywhere in your publicly visible folder (the one with index.html in it). Then you just make the path relative to that, so if you put them in public/images/users the path would be /images/users/filename.png.

You could also have the ProfilePicture component handle the path, and just store the filename in your database. So the database would store filename.png and your ProfilePicture component would know to add /images/users/ to the beginning. That way if you change the profile picture folder later you don't have to update DB records, just change the ProfilePicture component. This is probably best.

answered Mar 18, 2016 at 19:44

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to path to external (dynamic) assets with Vue-Loader / Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related