vue3.x 创建的项目使用element-ui el-image组件图片无法显示

JoeBlackzqq 2019-08-08 05:31:40

环境:



[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

安装element: vue add element
修改HelloWorld.vue:



<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <div>

      <img width=100 src=".././assets/logo.png" alt="he.logo">

    </div>

    <div class="div_el">

      <el-image src="../assets/logo.png" alt="sorry"></el-image>

    </div>

  </div>

</template>



<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }

}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h3 {

  margin: 40px 0 0;

}



a {

  color: #42b983;

}



.hello {

  margin: auto;

}



.hello img {

  border: 1px dashed red;

}



.div_el {

  border: 1px solid green;

  width: 200px;

  height: 100px;

}

</style>

浏览器运行，el-image对应的图片加载失败，求解！

...全文

6170 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

Cathy_S 2020-09-18

打赏
举报

请问楼主是用的vue cli3还是vue.js3？因为vue.js3的话似乎不能兼容elementUI了，页面打印那里会报错。如果是的话，想知道怎么兼容的？main.js里不能写Vue.use(ElementUI)，加到createApp(App)后面也不可以，全局API叫createApp。

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

createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

yssa1125001 2020-05-18

打赏
举报

引用 14 楼奔跑的痕迹的回复:

可以将src挂载到data中呀，如：

     
 <template>
        <div class="hello">
          <h1><el-image :src="imgurl" alt="sorry"></h1>
          <div class="div_el" style="width: 300px;height: 300px;">
            <el-image :src="imgurl" alt="sorry"></el-image>
          </div>
        </div>
      </template>


data() {
      return {
        caption: "接口审核",
        imgurl:require('../../assets/images/login/login-back-img.jpg')
      }
    },

这种方式是最符合实际的，也是有效的

yssa1125001 2020-05-18

打赏
举报

引用 8 楼 zzzzzds 的回复:

应该是el-image组件自带的一个bug，你这样写两次请求的图片url是不一样的。你把 src="@/assets/logo.png" 换成 :src="require('@/assets/logo.png')" 就可以了。

这样我试了，确实有效

张艺名 2019-11-25

打赏
举报

<el-image :src="require('~/assets/images/nopic.png')"></el-image>

JoeBlackzqq 2019-08-13

打赏
举报

引用 15 楼 zzzzzds 的回复:

[quote=引用 12 楼 JoeBlackzqq 的回复:]
[quote=引用 8 楼 zzzzzds 的回复:]
应该是el-image组件自带的一个bug，你这样写两次请求的图片url是不一样的。
你把
src="@/assets/logo.png"
换成
:src="require('@/assets/logo.png')"
就可以了。

你这思路是对了, 但是答案是错的.

""里的东西, 仅是字符串, 它哪知道你这是js代码呀![/quote]
若你觉得这样不行，那你可以在data里面声明一个变量imgURL啥的，挂载一下也行啊，看你个人喜好了[/quote]

完全没问题，先有答案，再谈优化，剩下的小事我自己可以搞定

JoeBlackzqq 2019-08-13

打赏
举报

引用 14 楼马璟的回复:

可以将src挂载到data中呀，如：

     

 <template>

        <div class="hello">

          <h1><el-image :src="imgurl" alt="sorry"></h1>

          <div class="div_el" style="width: 300px;height: 300px;">

            <el-image :src="imgurl" alt="sorry"></el-image>

          </div>

        </div>

      </template>



data() {

      return {

        caption: "接口审核",

        imgurl:require('../../assets/images/login/login-back-img.jpg')

      }

    },

谢谢，实际操作应该是你这种思路！

zzzzzds 2019-08-12

打赏
举报

引用 12 楼 JoeBlackzqq 的回复:

[quote=引用 8 楼 zzzzzds 的回复:] 应该是el-image组件自带的一个bug，你这样写两次请求的图片url是不一样的。你把 src="@/assets/logo.png" 换成 :src="require('@/assets/logo.png')" 就可以了。

你这思路是对了, 但是答案是错的. ""里的东西, 仅是字符串, 它哪知道你这是js代码呀![/quote] 若你觉得这样不行，那你可以在data里面声明一个变量imgURL啥的，挂载一下也行啊，看你个人喜好了

奔跑的痕迹 2019-08-12

打赏
举报

可以将src挂载到data中呀，如：

     
 <template>
        <div class="hello">
          <h1><el-image :src="imgurl" alt="sorry"></h1>
          <div class="div_el" style="width: 300px;height: 300px;">
            <el-image :src="imgurl" alt="sorry"></el-image>
          </div>
        </div>
      </template>


data() {
      return {
        caption: "接口审核",
        imgurl:require('../../assets/images/login/login-back-img.jpg')
      }
    },

JoeBlackzqq 2019-08-09

打赏
举报

引用 8 楼 zzzzzds 的回复:

应该是el-image组件自带的一个bug，你这样写两次请求的图片url是不一样的。
你把
src="@/assets/logo.png"
换成
:src="require('@/assets/logo.png')"
就可以了。

你这思路是对了, 但是答案是错的.

""里的东西, 仅是字符串, 它哪知道你这是js代码呀!

JoeBlackzqq 2019-08-09

打赏
举报

引用 9 楼 DBLDT 的回复:

你使用了nuxt框架吗，还是说你的项目只是vue，如果使用nuxt 访问图片路径可以设置成src="~/assets/logo.png"试试，前提是你确定你项目真的引入element-ui了，还是说你只把element-ui模块添加到项目而没引用它，就直接使用它的组件。

创建项目: vue create ele

cd ele

cnpm i

npm run serve

安装element: vue add element
修改HelloWorld.vue:

这里已经包含了我创建项目到改代码所有的操作步骤了!你想太多了

就是这么几步,你可以在本地试试.

答案的关键是我写的地址没有经过require()处理, webpack打包时把路径换了!就是这么回事

JoeBlackzqq 2019-08-09