The address behind the vue: src is the local picture.

1. When using vue, there are many pictures in the local images/tempbanner directory. When entering, a pageName, will be added to pageName as banner1;
2, and the image can be opened using picture.
3. Because the picture is to be changed according to pageName, it is written in this way

Mar.18,2021

F12 check to see if the src of img is correct.


generally, my pictures are placed in the images, under static so that they can be found both in the development environment and when they are packaged.
this code uses references even though it doesn't use src,. In fact, yours is still a matter of path. By the way, I have to add an extra layer to the path when I pack, so there will be an environmental judgment.
`
< template >
< div class= "empty" >

<div class="empty-bg" :style="{'background':'url('+imgPath+'/static/images/'+img+'.png) no-repeat','backgroundSize':'contain'}"></div>
<div class="empty-tip" v-html="tip"></div>

< / div >
< / template >

< script >
export default {

name: 'empty',
props:{
  tip:String,
  img:String
},
data () {
  return {
    imgPath:process.env.NODE_ENV==='development'?'':'/vp'
  }
},
created () {}

}
< / script > `


if the number of pictures is expected, you should explicitly traverse the object where the address of the picture is parsed and stored in pageName using require, such as

  

to use an absolute path

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31134-402f2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31134-402f2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?