current position:Home>Record the solution to the error in obtaining the picture in springboot in Vue

Record the solution to the error in obtaining the picture in springboot in Vue

2022-05-15 02:09:30A delicate cat

Sometimes we are vue When uploading pictures from the front end , The uploaded image will be saved in springboot Under the path in , So when we're in vue The front end wants to pass el-image label (elementui Components ) When displaying the picture just uploaded , There will be a problem that the picture cannot be loaded , The solution to the problem :

First step : First, test whether it can be in springboot Pass through http://localhost:port number/image.jpg( Take the picture for example ) Access at /resources/static、/resources/public、/resources/resources Static resources under

If you have read the source code , Will find /resources/static、/resources/public、/resources/resources All can be springboot Where static resources are stored in .
 Insert picture description here
If we were /resources/static/img The storage name under the path is “84671d30-53ff-4ebc-b7c5-b41660ef3f72 Cheese berry .jpg” Pictures of the , Then we can go through http://localhost:1252/upload/img/84671d30-53ff-4ebc-b7c5-b41660ef3f72 Cheese berry .jpg Access static resources in the browser .
 Insert picture description here
We may encounter such problems : Through the above url cannot access springboot Static resources in . If there is such a problem , Please refer to this blog :

Spring-Boot: The written website cannot access static resources ? How to pass url visit SpringBoot Static resources in the project ?

The second step : stay vue In the front end , stay el-table Of src Use in Tags http://localhost:port number/image.jpg On display in springboot Pictures stored under the path

 Insert picture description here
( It's used here elementui Medium el-table Components , If the el-table as well as slot-scope=“scope” Some questions , Please go to elementui Official website To read )
 Insert picture description here
among scope.row.picture The value of is the value obtained from the database through the back end
 Insert picture description here
therefore ,img The value is http://localhost:1252/upload/img/84671d30-53ff-4ebc-b7c5-b41660ef3f72 Cheese berry .jpg( With cheese and berries .jpg For example ),el-image Components can be displayed and stored in springboot Pictures under the path
 Insert picture description here

copyright notice
author[A delicate cat],Please bring the original link to reprint, thank you.

Random recommended