vue无法显示图片（从数据库拿的路径）

Question

问题描述

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

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

两者都不能正常显示图片

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

相关代码

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

//能正常显示的
<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 都不行

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

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

Answer 1

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

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

Answer 2

专门注册了一个账号，我在这个坑上爬了有整整半天:(

注意：一楼的那个方法是通过引入static文件夹中的图片，但是这个方法在vue-cli 3.x中已经不适用了，vue-cli3已经把static文件夹封装起来了，用不了这个方法.

解决方法：
如果要通过前端v-for循环，动态获取数据库中的图片路径并显示的话，这里我选择了require()方法

首先你得明白require()的一些使用注意事项：

require(path) ,path 至少要有三部分组成, 目录,文件名和后缀
后缀即文件后缀，必须要加上，不然会报错
文件名：可用变量表示

---

下面是解决办法：

方法一：

代码可以类似：

var imgUrl = "a";
 
let img = require('../images/'+imgUrl+'.jpg');

第一部分为图片相对路径的一部分，第二部分imgUrl为图片名（可设置为变量），最后一部分为图片后缀。

方法二：

我测试过require('../images/'+imgUrl);这种方法，这里的imgUrl中包含了文件后缀
如果你这样用报错了：can't find module './xxx.jpg'
这是因为你引入的图片路径不对，多检查几遍。

我用的是v-for循环动态遍历require()过的图片路径，然后做了一个滚动图。
如果你按照我的解决方法做了，但还是报错can't find module './xxx.jpg'

1. 请检查你有没有遵守require()方法的使用规定
2. 检查你的图片路径有没有引错，图片路径一般引入的是相对路径。

---

现在中国的疑问贴就是互相抄袭，论坛里有人提问，也没有人回答，会的人烂熟于心，不会的永远不会，我在这里真心的希望能帮到你们。

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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