毕设-vue+element-ui src动态获取（已解决）

需求分析

　　后端返回前端的信息要使用<el-table>显示，文字直接显示，头像本地路径（格式为D:\CoolCatFile\Cover\039d7336-3685-4fc6-a486-c2291816ee73.jpg） 之类的先将格式转化为（http://localhost:8181/singer/file/music/039d7336-3685-4fc6-a486-c2291816ee73.jpg），然后让<el-image>显示。

　　但是将转换后的路径与src绑定后没有效果，待我问问大佬。

　　目前想到的折中方法是在对应的列中加入<a>标签，然后在新的页面显示。

例子

　　官网的例子讲的听清楚的，但是因为是刚接触，直接忽略了...

<el-table-column
          label="封面"
          align="center"
          :min-width="170"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="
                getPhotoResourceSrc(
                  'http://localhost:8181/singer/file/cover/',
                  scope.row.music_photoSrc
                )
              "
              @click="
                getResourceSrc(
                  'http://localhost:8181/singer/file/cover/',
                  scope.row.music_photoSrc
                )
              "
            ></el-image>
          </template>
        </el-table-column>

 

//将本地路径转换为请求路径
    getResourceSrc(req, src) {
      console.log(req, src);
      if (src != null) {
        var arr = src.split("\\");
        let href = req + arr[arr.length - 1];
        window.open(href, "_blank");
      }
    },
    getPhotoResourceSrc(req, src) {
      if (src != null) {
        var arr = src.split("\\");
        let href = req + arr[arr.length - 1];
        return href;
      }
    },