In the vue project, use v-for to loop the local picture, but the picture is not displayed. What is the reason for this?

use v-for to loop local pictures in the vue project, and the pictures are not displayed. The full path can be printed out in the p tag, but the picture is not displayed, as shown in the following figure

< el-carousel-item VFF = "(item, index) in imgList": key= "index" > 

       
{{item.imgurl}}

       <img v-bind:src="item.imgurl">

< / el-carousel-item >

export default {
name: "index",
data () {

return{
   imgList:[
    {imgurl:"../../assets/banner0.jpg",name:"3"},
    {imgurl:"../../assets/banner1.jpg",name:"1"},
   ]
}

},
}

clipboard.png

Javascript
Mar.28,2021 
imgList:[
    {imgurl: require('../../assets/banner0.jpg'), name:'3'},
    {imgurl: require('../../assets/banner1.jpg'), name:'1'},
]
<img v-bind:src="require(item.imgurl)">
import image0 from '../../assets/banner0.jpg'
import image1 from '../../assets/banner1.jpg'

export default {
    data() {
        return{
           imgList:[
            {imgurl:image0, name:'3'},
            {imgurl:image1, name:'1'},
           ]
        }
    }
}

the picture should be put into the static directory

your this should be the problem of the file path, do you F12 see if the picture is 404? At least for now, there is no problem with the way you write vue

use require to introduce pictures into

this may have something to do with your configuration. If you look at the configuration of publicpath, it must be a problem with the path. You can use require, to use loader, and if you don't use require, it must be static resources. You need to specify the directory of static files in your configuration file

static directory and try

need to introduce pictures 

import banner0 from '../../assets/banner0.jpg'
import banner1 from '../../assets/banner1.jpg'
For

loop output, you need to add a vMuthBind _ VRCC _ bound _ require _ xxxx 'and then use it

.

Previous: How does xshell6 resume transmission from breakpoint?

Next: The pull-up loading ios side of the vue project is not compatible (cannot scroll, but there is data)

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu