Shulou(Shulou.com)05/31 Report--

This article focuses on "how to dynamically bind the src properties of img by vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how vue dynamically binds the src property of img"!

Dynamically bind the src property of img (v-bind)

There is a particularly tricky problem today, when using img to dynamically bind image paths on the page, it is always not displayed. (code before processing)

{{item.name}} Merchant: [{Uncle imgUrl:'../../assets/image/ telling stories .png', Uncle name:' telling stories'}, {imgUrl:'../../assets/image/ Fanden Reading .png', name:' Fandon Reading'}, {imgUrl:'../../assets/image/QQ Music .png', name:'QQ Music'} {imgUrl:'../../assets/image/ DiDi .png', name:' DiDi'}, {imgUrl:'../../assets/image/ Wal-Mart .png', name:' Wal-Mart'}, {imgUrl:'../../assets/image/ Starbucks .png', name:' Starbucks'}, {imgUrl:'../../assets/image/ iqiyi .png', name:' iqiyi'} {imgUrl:'../../assets/image/ Tencent Video .png', name:' Tencent Video'}, {imgUrl:'../../assets/image/ Youku .png', name:' Youku'}, {imgUrl:'../../assets/image/ Ctrip .png', name:' Ctrip'},]

Solution.

Picture links are needed through require packages. In this way, the picture can be displayed normally. (the data requested by the network should be processed accordingly.)

* the path of the picture does not travel in Chinese. This is just a demonstration.

Merchant: [{imgUrl:require ('.. /.. / assets/image/ Uncle Kay tells stories .png'), name:' Uncle Kay tells stories'}, {imgUrl:require (".. /.. / assets/image/ Fanden Reading .png"), name:' Fandon Reading'}, {imgUrl:require (".. /.. / assets/image/QQ Music .png"), name:'QQ Music'} {imgUrl:require (".. / assets/image/ Ctrip .png"), name:' Ctrip'}, {imgUrl:require (".. /.. / assets/image/ DiDi .png"), name:' DiDi'}, {imgUrl:require (".. /.. / assets/image/ Wal-Mart .png"), name:' Wal-Mart'}, {imgUrl:require (".. /.. / assets/image/ Starbucks .png") Name:' Starbucks'}, {imgUrl:require (".. /.. / assets/image/ iqiyi .png"), name:' iqiyi'}, {imgUrl:require (".. /.. / assets/image/ Tencent Video .png"), name:' Tencent Video'}, {imgUrl:require (".. /.. / assets/image/ Youku.png"), name:' Youku'},]

Vue add the src address of img v-bind

Vue uses {{a}} to obtain data

But it is not parsed in the src of the img tag.

In accordance with the above usage

Html part

Js part

Const vm1 = new Vue ({el:'# test2', data: {url: "a.jpg",}})

In this way, the console will report an error and the address of img will not be resolved.

The correct usage binds through v-bind

So that when the output is made, the url will be parsed

If there are a lot of attributes in the tag, v-bind will need to write a lot and will look very messy.

Vue also provides an abbreviation to precede the attribute with a colon, such as src='url', which can also solve the above problem.

At this point, I believe you have a deeper understanding of "how vue dynamically binds the src properties of img". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.