Vueのassetsフォルダに入れたimg画像ファイルを使用する方法

2021年6月19日Vue.js

Vueのassetsフォルダに入れたimg画像ファイルを使用する方法をまとめました。

Vueのassetsフォルダに入れたimg画像ファイルを使用する方法

まず、Nust.jsで使う場合、こちらの記事がとても参考になります。
assetsフォルダではなくstaticにいれるなどした画像の配置場所で指定方法が異なるので注意が必要です。

フォルダ構成

src/
|- assets/
|  |- img/
|  |  |- img1.jpg
|  |  |- img2.jpg
|  |  |- img3.jpg
|  |  |- img4.jpg
|  |  |- img5.jpg
|  ...
|
|- main.js
|- App.vue

srcフォルダのassetsフォルダにimgフォルダを作成して、その中に画像ファイルを格納しているとします。

imgタグの静的なsrc属性で指定

<template>
<header class="header">
  <div class="header__logo-box">
    <img src="@/assets/img/img1.jpg" alt="Logo" class="header__logo">
    <img src="~@/assets/img/img1.jpg" alt="Logo" class="header__logo">
    <img src="../assets/img/img1.jpg" alt="Logo" class="header__logo">
  </div>
</header>
</template>

上の３通りどれでも正常に動作します。

imgタグの動的なsrc属性をscriptで変数を作成して指定

<template>
<header class="header">
  <div class="header__logo-box">
    <img :src="img1" alt="Logo" class="header__logo">
    <img :src="img2" alt="Logo" class="header__logo">
    <img :src="img3" alt="Logo" class="header__logo">
  </div>
</header>
</template>

上のようにimg1からimg3までの変数を使用して、v-bindで動的にしたsrc属性に変数を使っって画像を指定します。

上のケースで、srciptで変数を作成する場合、うまく動作するケースとしないケースが下の通りです。

<script>
import { ref } from 'vue'
export default {
  setup() {
    const img1 = ref()
    const img2 = ref()
    const img3 = ref()

  // 動かない
    // img1.value = '../assets/img/img/img1'
    // img2.value = '@/assets/img/img/img1'
    // img3.value = '~@/assets/img/img/img1'

  // 動く
    img1.value = require('../assets/img/img/img1')
    img2.value = require('@/assets/img/img/img1')

  // 動かない
    // img3.value = require('~@/assets/img/img/img1')

    return {
      img1,
      img2,
      img3,
    }
  },
}</script>

requireをつけないと動作しません。
また、requireをつけてもパスが~@の場合は動作しません。

変数を使わずtemplateでimgタグの動的なsrc属性に直接指定

変数を使わずimgタグの動的なsrc属性に直接指定する場合も上と同様です。

<template>
<header class="header">
  <div class="header__logo-box">
  <!-- うまく動作する -->
    <img :src="require('../assets/img/img1.jpg')" alt="Logo" class="header__logo">
    <img :src="require('@/assets/img/img1.jpg')" alt="Logo" class="header__logo">
  <!-- 動作しない -->
    <!-- <img :src="require('~@/assets/img/img1.jpg')" alt="Logo" class="header__logo"> -->
  </div>
</header>
</template>

cssでbackground-imageとして指定

上記のheaderクラスにbackground-imageで背景画像を挿入します。

.header {
    height: 85vh;
  // うまく動作する
    background-image: url(../assets/img/hero-small.jpg);
    background-image: url(~@/assets/img/hero-small.jpg);
  // うまく動作しない
    // background-image: url(@/assets/img/hero-small.jpg);
}

その場合、今度は@はうまく動作せず、その他の方法でうまく動作します。