undefinedfix
Sign in

Vue can't display picture (path from database)

computernoob2012 edited in Mon, 13 Jun 2022

Problem description

This is the database. The fields are. / assets / image / elites/ gaoyan.jpg SRC at that time

This is the database field required (". / assets / image / elites)/ gaoyan.jpg S'r'c

Neither of them can display the picture properly

The background of the problem and what methods have you tried

Related codes

//Please paste the code text below (do not use pictures instead of codes)

//能正常显示的
<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);
        }
    )
}




//Database img_ The SRC field stores the requirement (". / /. / assets / image / elites)/ gaoyan.jpg ") or this. /. / assets / image / elites/ gaoyan.jpg None of them

What are your expectations? What is the actual error message?

Hope the boss can help solve the problem of picture display

6 Replies
Regis
commented on Tue, 14 Jun 2022

1. The resource itself in the / assets directory will be escaped to Base64 and packaged to / dist/ app.js 2. Using require to access images is also an operation that takes effect at compile time, and it is invalid to use require after the back end returns;

So you can put the static resources that you don't want to be compiled in the / static directory. The / static directory will be copied to the built / dist folder by default, and the relative path can be used. However, it is recommended that the absolute path be stored in the database, otherwise it is unreasonable to change the database data when the resource location changes.

Alek
commented on Tue, 14 Jun 2022

1. Can the browser open the link to see the picture? 2. Yes, let's see if it's CSS; No, there is a problem with the image path. 3. Moreover, the image path of the database should not be an absolute path, that is, no path ./../../ It should be / xxx . png

altegn0
commented on Tue, 14 Jun 2022
created () {
    this.$axios.get('xxxx').then(
        response => {
            this.imgSrc= require(response.data.img_src); 
            console.log(this.imgSrc);
        }
    ).catch(
        error => {
            console.log(error);
        }
    )
}
GertVW
commented on Tue, 14 Jun 2022

Just return a picture name, put the picture in the static directory and spell / static dynamically/ xxx.jpg It's just the right path

Youssef
commented on Wed, 15 Jun 2022

The server returns the complete absolute path.

TitleLoansKaysville
commented on Wed, 15 Jun 2022

I have registered a special account. I have been climbing this pit for half a day(

Note: the method on the first floor is to introduce the pictures in the static folder, but this method is no longer applicable in vue-cli3. X. vue-cli3 has encapsulated the static folder, so this method can't be used

Solution: if you want to dynamically obtain and display the image path in the database through the front-end V-for loop, I choose the require () method here

First of all, you need to understand some precautions for using require()

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

Here's the solution:

Method 1

The code can be similar to:

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

The first part is a part of the relative path of the image, the second part imgurl is the image name (which can be set as a variable), and the last part is the image suffix.

Method 2

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

I use v - For loop dynamic traversal require () Go through the image path, and then make a scroll map. If you follow my solution and still report an error ' t find module './ xxx . jpg '

  1. Please check that you have complied with the usage rules of the require () method
  2. Check your image path for misquotation. Image path generally introduces relative path.

Now China's question posts are plagiarized. Some people ask questions in the forum, but no one answers them. Those who will know each other well will never. I sincerely hope that I can help you.

lock This question has been locked and the reply function has been disabled.