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

This article shares with you the content of the sample analysis of the src property binding of img in Vue and the static folder. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Many people encounter such a problem in the development of vue: the src property of img binds the url variable, but the image load fails.

In most cases, it is the developer who uses the wrong way of writing, such as:

It must be wrong to write this way, and the correct way to write it is to use v-bind:

However, sometimes even with the correct syntax, the image cannot be displayed because your imgUrl uses the path of the local image.

For example, there is the following file structure:

Now, we want to use the logo.png image located in the src/assets/ directory in App.vue, so we set up:

ImgUrl ='. / assets/logo.png'

Something strange happened and the picture failed to load. Look at the source code of the web page and find an error:

Looking at this error code, we find that the web page uses the root domain name as the root of the relative path, but the path of our file is relative to the root of the project file, so of course we can't find it.

In that case, let's go to the dist folder after build. It is found that the structure of the file is as follows:

Does that mean you just need to change url to. / static/img/logo.png? It still doesn't work. When we open the img folder, we can find that all the file names have been added with a random string, and the original file names can no longer be matched.

So, how on earth should you load local images? Looking back at the file structure of vue-cli, you can see that there is a folder called static. Try to put logo.png in this folder, and then modify imgUrl:

ImgUrl ='/ static/logo.png'

Logo.png was successfully read. After executing npm run build, I looked at the dist file and found that logo.png was left intact in the root directory.

Originally, the previous directory structure is problematic, static files such as pictures should be placed under this static folder, and the files (folders) under this folder will be placed in the root directory of the site according to the original structure. At this point, we can access these static files by using the / static absolute path.

In addition, if you want to read local pictures without adjusting the directory structure, there is another way to pass in the picture coding directly. That is:

ImgUrl = require ('. / assets/logo.png')

This allows you to read the pictures under the project path, but be aware that because CommonJS only allows the literal amount of strings, the flexibility of this method is still very poor, so it is recommended to put static files in the static folder.

Thank you for reading! On the "img in Vue src attribute binding and static folder example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.