テンプレート内とスクリプトブロック内の画像パスの違い
date
Mar 3, 2023
repo_url
slug
path-template-script
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link
Vueでは外部にそのまま公開されるのはpublicフォルダのみとなっている。
プロジェクトルートのsrc/assetsに入れたファイルはビルド時に適切なフォルダに再配置し、自動でパスが書き変わる仕組みになっている。
<template> 内でパスを指定する場合
src内のassetsなどで指定する。
<img src="./assets/logo.svg">
<script> 内でパスを指定する場合
public内のパスで指定する。
const imgAttr = ref({
src:"/images/"logo.svg",
alt="Vueのロゴ"
});