vue-cli4创建的项目中,静态图片无法显示

Question

前言

对你来说,问题不难;所以请坚持看完
众人拾材火焰高,大胆给出你的想法,错了没关系,主要是要用 "路"
给出解决方法也行，能有理有据更好。`

问题描述

TabBarItem 是自定组件;TabBarItem中有一个img标签用于显示图片,imgUrl是传递给img.src作为Url使用,但这中写法并不显示图片;通过浏览器检查发现img.src='@/assets/img/tabbar/[email protected]' 

<TabBarItem imgUrl=@/assets/img/tabbar/[email protected]  title="我的"></TabBarItem>

环境说明

IDE

IDE:VSCode Version:1.50.1

package.json

{
  "name": "vue-cli",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^1.19.1"
  }
}

目录结构

---src
    ---assets
         ---css
         ---img
             ---tabbar
                  [email protected]
        
    ---components
         ---tabbar
               TabBar.vue
               TabBarItem.vue
 
    APP.vue
    main.js

main.js

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

APP.vue

<template>
<div id="app">
  <!-- 这里图片可以正常显示，证明图片路径没有问题 -->
  <img src=@/assets/img/tabbar/[email protected] alt="">
  <TabBar>
    <!-- 同样写法，自定义组件内无法显示 -->
    <TabBarItem imgUrl=@/assets/img/tabbar/[email protected] title="我的"></TabBarItem>
  </TabBar>
</div>
</template>

<script>

import TabBar  from './components/tabbar/TabBar'
import TabBarItem from './components/tabbar/TabBarItem'

export default {
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style>
@import './assets/css/base.css';
</style>

TabBar.vue

<template>
    <div class="tab-bar">
            <slot></slot>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
.tab-bar {
  display:flex;
  background-color: #f6f6f6;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  box-shadow: 0px -1px 1px rgba(100,100,100,.2);
}

</style>

TabBarItem.vue

<template>
     <div class="tab-bar-item">
           <img :src=imgUrl alt="">
           <div>{{title}}</div>
     </div>

</template>

<script>
    export default {
        props:['title','imgUrl'],
    }
</script>

<style scoped>
.tab-bar-item {
  flex: 1;
  height: 49px;
  text-align: center;
}
.tab-bar-item img{
  height:25px;
}

.tab-bar-item div {
   margin-top: 0px;
}
</style>

期望

众人拾材火焰高,大胆给出你的想法,错了没关系,主要是要用 "路"
给出解决方法也行，能有理有据更好。

reference

vue-cli HTML和静态资源处理

Answer 1

一种解决方法,虽然有点冗余,希望大家提供更好的方法; 修改App.vue内容如下

<template>

<div id="app">

  <!-- 这里图片可以正常显示，证明图片路径没有问题 -->
  <img src=@/assets/img/tabbar/[email protected] alt="">
  
  <TabBar>
      <!-- imgUrl绑定到属性 -->
      <TabBarItem :imgUrl=igx title="我的"></TabBarItem>
  </TabBar>
  
</div>
</template>

<script>

import TabBar  from './components/tabbar/TabBar'
import TabBarItem from './components/tabbar/TabBarItem'

export default {
  data(){
    return {
         //这里是关键: 把图片用模块引入. 
         igx:require('@/assets/img/tabbar/[email protected]')
    }
       
  },
  components:{
    TabBar,
    TabBarItem
  }
}
</script>
<style>
@import './assets/css/base.css';
</style>