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

Что вызывает такое поведение?

[EDIT] Я изменил 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>

, которая должна решить вашу проблему, на самом деле, она должна решить все ваши жизненные проблемы