The src attribute binding problem of img in vue, the wrong picture is displayed

The src attribute binding problem of img in vue, the wrong picture is displayed

Problem: The image address filled in the src attribute of img can be rendered normally, but once the binding :srcattribute is used, the image fails to load

The previous front-end brother didn’t do this interaction. I added it after I took over. It’s a very simple interaction. When I replaced the picture, I prepared a ternary judgment. The src needs attribute binding, so I found the same address, and I put the picture It’s just that it can’t be loaded, the picture can’t be loaded, it must be an address problem (insert a sentence: the file structure of the last boss may not be standardized), usually static files are stored, but he created a stalic (crying and laughing) .gif)

Above code:

<img src="../../src/stalic/font/arrow0-0.png" alt="">  //上一位的

<img :src="Bol == 1 ? imgUrl : imgUrl2" alt="">     //我的   data里面是：
imgUrl: '../../../src/stalic/font/arrow0.png',
imgUrl2: '../../../src/stalic/font/arrow0-0.png'

But the browser didn't render my picture, but his picture can be rendered normally, the same path, why is mine not displayed? And the browser has not reported an error.

Reason: The local path is used here, and I remembered the static static folder, so I put the picture into the static folder

Modify the path again:

imgUrl: ./static/arrow0.png,
imgUrl2: ./static/arrow0-0.png

or Common

imgUrl: require('../../../src/static/font/arrow0.png'),
imgUrl2: require('../../../src/static/font/arrow0-0.png')

The picture finally came out, and then summarize a few problems that can solve the problem that the local picture path cannot be displayed:

1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接<img :src="imgUrl">去展示。
3.图片放在assets文件夹，然后在data里面require进图片

data() {
    
    
	imgUrl:require('./assets/logo.png')
}

然后放入<img :src="imgUrl">展示即可。