Nuxtでimgのsrc属性をJSから設定する場合の注意点

assetsの画像を読む際に、template内のimgタグに直接記述するのではなく、スクリプト側の変数を利用してsrcを設定する際、~などがうまく意図したパスに変換されないことがあります。

例

このようにした場合、上のimgタグは適切なパスを参照するのに対し、下のタグは~/assets/img/keyboard.jpgのままになります。

<template>
  <div>
    <img src="~/assets/img/keyboard.jpg"> <!-- OK -->
    <img :src="imgSrc"> <!-- NG -->
  </div>
<template>

<script>
export default {
  data: () => {
    return {
      imgSrc: '~/assets/img/keyboard.jpg'
    }
  }
}
</script>

解決策

template内のsrc属性は、vue-loaderでコンパイル時に~/assets/img/keyboard.jpg->/_nuxt/assets/img/keyboard.jpgのように適切なパスに変換されるので、スクリプト内で同じような処理を挟む必要があります。

ja.nuxtjs.org

vue-loaderの仕様。

vue-loader-v14.vuejs.org

1. requireを使う

export default {
  data: () => {
    return {
      imgSrc: require('~/assets/img/keyboard.jpg')
    }
  }
}

2. importを使う

import keyboardImage from '~/assets/img/keyboard.jpg'

export default {
  data: () => {
    return {
      imgSrc: keyboardImage
    }
  }
}