若依Ruoyi-vue二次开发-新建模块显示图片

若依Ruoyi-vue二次开发-新建模块显示图片

代码生成器自动生成效果-图片加载失败

• 首先检查图片路径是否正确
  项目同步的文件夹：/profile相当于配置文件中的D:/ruoyi/uploadPath
  
  图片应该放在这个文件夹下
• 图片已经存放在项目同步文件夹路径下
  
  仍然显示失败

正确显示图片如何修改-修改vue文件

• 首先修改components/ImageUpload/index.vue
  
  修改methods 内容。

// 修改前
uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList), this.fileList);
        this.$modal.closeLoading();
      }
    },
//修改后
uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.$modal.closeLoading();
      }
    },

• 然后修改新增功能的前端页面

// 修改前
      <el-table-column label="商品图片" align="center" prop="goodsImg" >
        <el-image
          style="width: 100px; height: 100px"
          :src="goodsImg"
          ></el-image>
      </el-table-column>
// 修改后
      <el-table-column label="商品图片" align="center" prop="goodsImg" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.goodsImg" :width="50" :height="50"/>
        </template>
      </el-table-column>

添加操作：还需在表单重置方法上添加 photos:undefined

// 修改前
        <el-form-item label="商品图片" prop="goodsImg">
          <el-input v-model="form.goodsImg" placeholder="请输入商品图片" />
        </el-form-item>
// 修改后
        <el-form-item label="商品图片" prop="goodsImg">
          <image-upload @input="getImgUrl" v-model="form.goodsImg"/>
        </el-form-item>

// 在methods方法的 reset()中添加
photos:undefined

添加 method 方法获取图片讲到的 url 并存入到我们新加的字段中去。

// 在methods方法中添加
getImgUrl(id,item){
      this.form.goodsImg=item[0].url
    },

结果展示