templateタグ内でbackground-imageを指定したいがパスがうまく繋がらない

Question

お世話になっております。
dataバインディングで記事の一覧を表示するコンポーネントを作ろうとしてます。
最後はv-forでループしてより短いコードにしようと考えています。

VUE CLI 3.7

dataバインディングで記事の一覧を表示するコンポーネントを作りたい。最後はv-forでループしてより短いコードにしようと考えている。

発生している問題・エラーメッセージ

サムネイルとなる画像が表示されない。data内のurlを使いたいのでtemplate内でのパスを繋ぐ方法を探している。

<template>
...
<div class="flexBox">
　　<!-- ブロック１ -->
	<div>
		<div class="thum" v-bind:style="{ 
			'background-image': 'url('+ articles.image + ')'
		}"></div>
		<p>{{ articles.text }}</p>
		<p class="date">{{articles.date}}</p>
		<a v-bind:href="articles.url"></a>
	</div>
　　<!-- ブロック2 -->
	<div>
		<div class="thum" style="background-image: url('/static/img/common/news_dammy02.jpg')"></div>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p class="date">2019.05.05</p>
		<a href="/news/"></a>
	</div>
　　<!-- ブロック3 -->
	<div>
		<div class="thum temp"></div>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p class="date">2019.05.05</p>
		<a href="/news/"></a>
	</div>

</div><!-- /.flexBox -->

...
</template>

<script>
export default {
name: 'newslnkitem',
data: function(){
	return{
		articles : 
			{
				image: "../assets/img/common/news_dammy01.jpg",
				text: 'テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト',
				date: '019.05.05',
				url: '/news'
			},
    }
}
}
</script>

<style>
.temp{
	background-image: url('../assets/img/common/news_dammy01.jpg') !important;
}
</style>

試したこと

style内でbackground-imageを指定してクラスを指定したら表示された(ブロック3)。
この時Googleデベロッパーツールで確認したパスは次のようになってます。

.temp {
    background-image: url(/img/news_dammy02.779c7fb6.jpg) 
}

Vue.jsでの画像指定方法を間違ってたので、振り返る

上の記事にstaticフォルダを使えば読み込めるとあったので、ドキュメントルートにstaticフォルダを作成しブロック２のように読み込もうとしたがダメだった。

フォルダ構成

project
├── public
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   │   ├── common
│   │   │       ├── news_dammy01.jpg
│   │   │       └── news_dammy02.jpg
│   │   └── logo.png
│   ├── components
│   │   └── NewsLnkItem.vue
│   ├── main.js
│   ├── router.js
│   └── views
└── static
    └── img
        └── common

NewsLnkItem.vueのコンポーネントで作っています。

Answer 1

解決しました^^

publicフォルダにstaticフォルダ繋いで指定したら出来ました!