Vue.js + Webpack請求多個不正確的資源URL

Question

我一直在使用Vue.js單個文件組件來構建一個網站，並且真正享受模塊化系統。 我遇到了一個問題，但是瀏覽器似乎在請求多個版本的資源，而不是每個版本只有一個URL。

HeaderBar.vue

<template>
    <div id="header" :class="{sticky: isSticking }">
        <img id="header-logo" src="../assets/logo/logo_horiz.svg">
        <div id="header-menubox">
            <a class="social-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/facebook_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/twitter_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/insta_blue.svg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img src="../assets/social/yelp_blue.svg">
            </a>
            <button id="header-menu-button" @click="toggleMenu">
                <img src="../assets/button/menu.svg">
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HeaderBar'
    }
</script>

<style scoped>
#header {
    position: sticky;
    width: 100%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    display: grid;
    grid-template-areas: "logo . menu";
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#header.sticky {
    background-color: #fff;
    box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}

#header-logo {
    grid-area: logo;
}

#header-menubox {
    grid-area: menu;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}

#header-menu-button {
    background-color: unset;
    display: block;
    cursor: pointer;
    border: 0;
    grid-column: 3 / 4;
    grid-row: 2;
}
</style>

App.vue

<template>
  <div id="app">
    <HeaderBar></HeaderBar>
  </div>
</template>

<script>
import HeaderBar from './components/HeaderBar.vue'

export default {
  name: 'app',
  components: {
    HeaderBar
  }
}
</script>

<style>
#app {
  width: 100%;
}
</style>

vue.config.js

module.exports = {
  publicPath: '/'
}

Chrome開發者控制台

是什么導致了這種行為？

[編輯]我修改了HeaderBar.vue來導入圖像：

<template>
    <div id="header" :class="{sticky: isSticking }">
        <img id="header-logo" :src="logoImg">
        <div id="header-menubox">
            <a class="social-link" href="[scrubbed]" target="_blank">
                <img :src="fbImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="twitImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="instaImg">
            </a>
            <a class="img-link" href="[scrubbed]" target="_blank">
                <img :src="yelpImg">
            </a>
            <button id="header-menu-button" @click="toggleMenu">
                <img :src="menuImg">
            </button>
        </div>
    </div>
</template>

<script>
    import logoImg from "../assets/logo/logo_horiz.svg"
    import fbImg from "../assets/social/facebook_blue.svg"
    import twitImg from "../assets/social/twitter_blue.svg"
    import instaImg from "../assets/social/insta_blue.svg"
    import yelpImg from "../assets/social/yelp_blue.svg"
    import menuImg from "../assets/button/menu.svg"

    export default {
        name: 'HeaderBar',
        data: function() {
            return {
                logoImg: logoImg,
                fbImg: fbImg,
                twitImg: twitImg,
                instaImg: instaImg,
                yelpImg: yelpImg,
                menuImg: menuImg
            }
        }
    }
</script>

<style scoped>
#header {
    position: sticky;
    width: 100%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 100;
    display: grid;
    grid-template-areas: "logo . menu";
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr 1fr;
}

#header.sticky {
    background-color: #fff;
    box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.2);
}

#header-logo {
    grid-area: logo;
}

#header-menubox {
    grid-area: menu;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
}

#header-menu-button {
    background-color: unset;
    display: block;
    cursor: pointer;
    border: 0;
    grid-column: 3 / 4;
    grid-row: 2;
}
</style>

現在我的錯誤少得多，但請求的URL看起來更奇怪：

Answer 1

你應該讓webpack處理這個。

很可能你正在使用的加載器插件不處理svgs 。

檢查config/webpack.config.js或build/webpack.base.conf.js並找到圖像規則（它應該與png，jpeg，gif匹配）。

將svg添加到該正則表達式。 你最終會得到類似的東西

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

Answer 2

您必須在組件的javascript部分中導入它們，然后將它們分配給元素。

或者至少，這就是我如何讓它發揮作用。

<template>
    <div id = "imgcontainer"> 
      <img v-bind:src="image"/> 
    </div>
</template>

<script> 
  import img1 from "../assets/1.jpg" 
  export default { 
    data(){
      return{
        image: '', 
      };
    },
    beforeCreate(){
     this.image = img1
    },
  } 
</script>

這應該解決你的問題，事實上，它應該解決你所有的生活問題