Vue.jsでimgが出力されません。

現在、laravel➕Vue.jsで簡単なページを作成しているのですが、<img>タグを使用して画像の表示をさせようとしても画像が表示されません。
※またnpm run watchをするとコンパイルが無限ループのように繰り返し行われてしまいます。

呼び出し元のコンポーネントです。

<template>
    <div class="container-fluid p-0">
        <div>
            <Header/>
            <Advertisement/>
            <Footer/>
        </div>
    </div>
</template>

<script>
    import Header from './Home/Header.vue'
    import Footer from './Home/Footer.vue'
    import Advertisement from './Home/Advertisement.vue'
    import Myservices from './Home/Myservices.vue'
    import Myfriends from './Home/Myfriends'

    export default {
        components: {
            Advertisement,
            Header,
            Footer
        }
    }
</script>

<style scoped>

</style>

Advertisement.vueです。


<template>
    <div class="container-fluid">
        <img src="../../../../public/images/ad1.png"/>
    </div>
</template>

<script>
    export default {
        name: "Advertisement.vue"
    }
</script>

<style scoped>

</style>

hwatarig

2020/03/10 16:57

画像が表示されない、というのは画像がリンク切れになっているということですか？それともimgタグ自体が出力されないのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

vueのimgタグは、srcをrequireしないと動かなかった覚えがあります。

vue
1	<template>
2    	<img :src="img_logo">
3    <template>
4    
5    <script>
6    export default{
7    	data(){
8    		return{
9    			img_logo: require('../../../../public/images/ad1.png')
10    		}
11    	}
12    }
13    </script>
14