Using Dynamic Static Image URLS in Vue.js

The quick answer, a partially defined path.
`:src="require(`@/assets/cards/${image}.jpg`)"`

I should preface that I love Vue! I have said that far too often to colleagues with looks of, "huh?" and "what did you say?".

I started using Vue using the amazing Vue CLI Tool that is provided. Much like create-react-app , Vue has a really powerful, behind the scenes, (include all the things) CLI that gets you up and running in minutes instead of days.

Webpack is behind a lot of the magic that the Vue CLI client provides and one of complexities of Webpack is how it manages assets. Webpack must manage assets from two perspectives. One is on your local development machine, and the other is your built out production ready version.

What happens behind the scenes?

This is what it looks like to bring an image into a *.vue template

<template>
  <img src="@/assets/logo.jpg" />
</template>

The default webpack config will automatically transform img elements and convert the url to a production ready url. When your project is built out, you should find your assets renamed to something like below.

<img src="/img/logo.f556f5d.png" />

This happens automagically with img elements. but most of the time we are using components from other frameworks and we need to be able to resolve asset paths on the fly.

What about a dynamic static path?

A team page would be dynamic to some extent. We would have team members, profile pictures that probably don't change too often associated with the team members id.

Resolved Assets

We can use `require` in our source url of our customer component to tell webpack about the asset being used. When the file loader runs into a situation where we have partially defined the asset path, it will copy everything relative to the dynamic part of the path to the static assets directory. For example, everything in the teams directory will be copied across.

<my-image-component :image="require(`@assets/teams/${teamId}.png`)" />

Another way we can use local assets is explicitly defining them as static assets. It could be icons, team pictures, or marketing collateral.

Using the Vue project config we can setup a static assets directory.

Static Assets

Add `vue.config.js` inside the root of your project directory and add the following config to it.

// Config file is automatically picked up by Vue CLI services.

module.exports = {
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

This will copy all the assets inside this directory to the build directory. You can reference any of these urls inside your project by using relative paths like `/static/my-filename.png`

Remember that when you use static paths, any change to the assets name or sub directory requires all the paths in your project to be updated.

I hope this post provides a little more insight into how Vue CLI and webpack handle dynamically generated static urls.

👍