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

Question

現在、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>

Comments

[hwatarig]

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

Answer 1

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

	<template>
    	<img :src="img_logo">
    <template>
    
    <script>
    export default{
    	data(){
    		return{
    			img_logo: require('../../../../public/images/ad1.png')
    		}
    	}
    }
    </script>
   

念のために参考のソースはっておきますね
【Vue.js】imgタグのsrc要素は指定の仕方によって読み込み方が違う

Comments

[LEOLEO3]

ありがとうございます！解決することができました！