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>

这应该可以解决你的问题，事实上，它应该可以解决你所有的生活问题