0

问题描述

这是数据库字段为 ./../../assets/image/elites/gaoyan.jpg 时候的src
clipboard.png

这是数据库字段为 require("./../../assets/image/elites/gaoyan.jpg") 时候的s'r'c
clipboard.png

两者都不能正常显示图片

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

//能正常显示的
<div>
    <img src="./../../assets/image/elites/gaoyan.jpg" alt="">
</div>

//换成动态的就不行了
<div>
    <img :src="imgSrc" alt="">
</div>

data() {
      return {
        imgSrc: ''
      }
},
created () {
    this.$axios.get('xxxx').then(
        response => {
            this.imgSrc= response.data.img_src; 
            console.log(this.imgSrc);
        }
    ).catch(
        error => {
            console.log(error);
        }
    )
}




//数据库img_src字段存的是 这个 require("./../../assets/image/elites/gaoyan.jpg")
或这个 ./../../assets/image/elites/gaoyan.jpg 都不行

你期待的结果是什么?实际看到的错误信息又是什么?

希望大佬可以帮忙解决下图片显示的问题

2019-01-11 提问
5 个回答
1

已采纳

1./assets目录下的资源本身会被转义成base64并打包到/dist/app.js中,所以不能使用相对路径;
2.使用require访问图片也是在编译时生效的操作,后端返回后再使用require操作是无效的;

所以可以把静态并且不想被编译的资源放到/static目录下,/static目录默认会被复制到构建后的/dist文件夹下,相对路径可以使用;但是建议数据库存储绝对路径,否则资源位置改变还要改变数据库数据是不合理的。

1

1、浏览器打开该链接能否看到图片?
2、能,看看是不是CSS的问题;不能,图片路径问题。
3、而且数据库的图片路径不应该是绝对路径,即没有 ./../../,应该是 /xxx.png

1
created () {
    this.$axios.get('xxxx').then(
        response => {
            this.imgSrc= require(response.data.img_src); 
            console.log(this.imgSrc);
        }
    ).catch(
        error => {
            console.log(error);
        }
    )
}
1

返回一个图片名称就行了,图片放static目录下,动态拼一个/static/xxx.jpg的路径就行了

1

服务端返回完整绝对路径。

撰写答案

你可能感兴趣的

推广链接