vue 3.x 中使用ele-image时相对路径的图片加载失败

ゝ一纸荒年。 2021-11-05 21:48 576阅读 0赞

参考文档： [https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]

环境: Mac OS X 10.12

[zcm@ele 2]$node -v
    v12.6.0
    [zcm@ele 3]$npm -v
    6.9.0
    [zcm@ele 4]$cnpm -v
    cnpm@6.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
    npm@6.10.2 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
    node@12.6.0 (/usr/local/Cellar/node/12.6.0/bin/node)
    npminstall@3.22.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
    prefix=/usr/local 
    darwin x64 16.7.0 
    registry=https://r.npm.taobao.org
    
    [zcm@ele 6]$vue -V
    3.9.2

创建项目: vue create ele  
  
cd ele  
  
cnpm i  
  
npm run serve

### **项目目录结构**： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70][]  
  
安装element: vue add element

修改main.js

import Vue from 'vue'
    
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    import App from './App.vue'
    
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')

修改App.vue

<template>
      <div id="app">
        <HelloWorld msg="Welcome to Your Vue.js App"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

修改 ./components/HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <div>
          <img class="dlogo" :src="src" />
          <img class="dlogo" src="../assets/logo.png" />
        </div>
        <div>
          <el-image class="dlogo" :src="src"></el-image>
          <el-image class="dlogo" src="@/assets/logo.png"></el-image>
          <el-image class="dlogo" src="../assets/logo.png"></el-image>
          <el-image class="dlogo" src="/images/logo.png"></el-image>
        </div>
        
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data: function () {
        return {
          src: require('@/assets/logo.png')
          // src: "../assets/logo.png"
        }
      },
    
      created ()
      {
        // console.log(this.src);
      }
    }
    </script>
    
    
    <style scoped>
    .hello {
      display: flex;
      flex-direction: column;
    }
    
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    
    .dlogo {
      border: 1px dashed red;
      height: 100px;
    }
    </style>

最终浏览器上运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70 1][]

能正常显示的图片对应的地址是：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70 2][]

总结：

1. assets目录下的资源文件在使用时要用require() 处理下，因为webpack打包时路径发生了变化！

2. 只有public下的文件，是原样打包的！

[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70]: /images/20211104/526da11395dc46f7b4e5b0c6a77350d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70 1]: /images/20211104/da9baa2cf26e45c3b4a13632ffac0c08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvZUJsYWNrenFx_size_16_color_FFFFFF_t_70 2]: /images/20211104/89297fd6664d48b590da7af973249559.png