Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Vue project v-bind dynamic binding src path is not successful how to solve the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this Vue project v-bind dynamic binding src path is not successful how to solve the article will have a harvest, let's take a look at it.

V-bind dynamic binding src path was not successful

Problem: when working on a Vue project, due to project requirements, when you need to dynamically bind the src of img, you suddenly find that if you directly request the image address of the background interface, it can be displayed.

However, when directly dynamically binding the relative or absolute path of the image of img's src, the image cannot be displayed.

Solution 1

When setting absolute or relative paths for data MyimgSrc, you should use require introduction to succeed.

CurrentSrc: require ("@ / assets/1.png") solution 2

Direct import

Import url from'.. / assets/logo.png'data {url,} solution 3

Put the picture in the static folder and you can import it directly.

Summary: when dynamically binding img's src, the require path is required when the relative path or absolute path of the vue data binding image.

Vue trampling pit-- dynamic v-for picture path problem

Problem description: want to use v-for to dynamically generate image paths

The path after packing is like this.

The packaged resource directory looks like this

The problem lies.

The above sample does not work, you will find that the picture is not displayed correctly on the page. As can be seen from the picture above, the path of the packaged picture is obviously wrong.

This is because webpack does not parse the path we put together, and the picture is not referenced to the packaged directory (if any, it should be 40).

This is described in the HTML and static resource processing of vue-cli documents

Static resources can be processed in two ways:

It is imported in JavaScript or referenced by relative path in template/CSS. Such references are handled by webpack.

Placed in the public directory or referenced by an absolute path. Such resources will be copied directly without being processed by webpack.

Import from relative path

When you use relative paths in JavaScript, CSS, or *. Vue files (you must use. When a static resource is referenced, it will be included in the dependency graph of webpack. In the process of compilation, all such as

, background: url (…) And the resource URL of CSS @ import is resolved as a module dependency.

For example, url (. / image.png) will be translated into require ('. / image.png')

And:

Will be compiled to: h ('img', {attrs: {src: require ('. / image.png')}})

So in the above we also write the relative path, why not be compiled?

This is because the url of the picture is not stitched together at compile time, and the {{}} expression will only be executed when it is rendered to the page, so the src is still'. /... /... / assets/img/' + item + '.jpg', so webpack doesn't think this is a module, so if you don't process it, the image won't be compiled.

Solution.

Introduce the picture as a resource, add require to the url of the picture, and become require (url).

Implementation code

Export default {name: ", data: function () {return {changeDirection: true, images: [require ('. /.. /.. / assets/img/0.jpg'),. Require ('.. /.. / assets/img/40.jpg'),]}

No way, so many pictures can't really be written one by one, is it? Multiple pictures should be written like this.

Export default {name: ", data: function () {return {changeDirection: true, images: (function () {/ / Import picture module let fileArr = []; for (let I = 0; I < 40) ) {fileArr [I] = require ('. /.. /.. / assets/img/' + I + '.jpg');} return fileArr;}) (),}

Modified packaged path

Modified and packaged resource directory

This is the end of the article on "how to solve the problem that the v-bind dynamic binding src path in the Vue project is not successful". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to solve if the v-bind dynamic binding src path in the Vue project is not successful". If you want to learn more knowledge, welcome to follow the industry information channel.

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.