Solve VUE Dynamic Load Local Image Problem

解决Vue动态加载本地图片问题

解决Vue动态加载本地图片问题 Recently encountered a problem, using V-bind dynamically binds the IMG SRC, and the picture is loaded. The console displays the SRC is available to the image address, but it is not available.

Finally, I found that the reason was originally shown in the browser ‘./img/img1.png’, that is, the steps that have not been compiled, and the acquired data is displayed directly as a string.

1. In the current interface global IMPORT image address

// is introduced using IMPORT Import img1 from ‘./img/img1.png’Import img2 from’ ./img/img2.png’Export default {data () {return {imglist [{id: 0, imgurl: img1}, {id: 1, IMGURL: IMG2}]}}}
   

 2. Using Require  图片[3]-Solve VUE Dynamic Load Local Image Problem-Tumi It may be very cumbersome with the first method, and it is not good to have an IMPORT when the data is more. At this time, use the Require to dynamically load  
GetImage () {this.imglist.foreach (item => {item.imgurl = Require (‘./ IMG /’ + item.name + ‘.png’)}}

DATA Data (this method does not use iMport)
   
DATA () {return {imglist [{id: 0, name: ‘Img1’, imgurl: ‘}, {ID: 1, Name: ‘IMG2’, IMGURL: ” ‘}]}}

The above method can solve the problem that the image cannot be displayed after the picture is dynamically bound, Video sympathy!

  The above is the solution to everyone to the solution to the VUE dynamic loading local picture problem, I hope that everyone can help, if you have any questions, please Leave me a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!  If you think this article helps you, welcome to reprint, please indicate the source, thank you! 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment