Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to load local pictures dynamically by vue

2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces the vue how to dynamically load local pictures of the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this vue how to dynamically load local picture articles will have a harvest, let's take a look at it.

Find a problem

Typically, one of our img tags is written in html as follows:

This way of writing can only refer to pictures in the relative path. Absolute paths cannot be used. Using absolute paths, such resources will be copied directly without being processed by webpack.

If src is a variable, we usually specify a variable src in data for dynamic binding.

Define the variable srcdata () {return {src: ".. / images/demo.png"}} in / / data

However, at this time, you will find that the picture is not loaded and the picture is not displayed. By viewing, it is found that the address of this picture shows.. / images/demo.png, that is to say, the relative path bound by v-bind will not be handled by webpack's file-loader, but will only do simple text replacement.

What are we going to do?

Solution method

1. Convert the picture to * * base64** format

Generally small pictures can do this, such as the icon icon, etc., the size is generally within the 10KB.

2. Use * * import** to introduce pictures

/ / use import to introduce the variable srcdata () {return {src: img}} defined in import img from ".. / images/demo.png" / / data

3. Use * * require** to load dynamically

The variable srcdata () {return {src: require (".. / images/demo.png")} is defined in / / data.

4. Introduce * * publicPath** and splice it in the path to realize the dynamic change of the introduced path.

/ / √ / / after compilation:

Export default: {data () {return {publicPath: process.env.BASE_URL,}},}

Configure the publicPath path in vue.config.js:

/ / vue.config.jsmodule.exports = {publicPath: "/ foo/",...} conclusion

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.

Principle

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.

When introduced with an absolute path, the path reads the resources in the public folder, and any static resources placed in the public folder will be simply copied to the compiled directory without special webpack processing.

When your application is deployed on the root path of a domain name, such as http://www.abc.com/, this introduction method can be displayed normally, but if your application is not deployed in the root of the domain name, then you need to configure the publicPath prefix for your URL. PublicPath is the basic URL when deploying the application package, which needs to be configured in vue.config.js.

Expansion

About vue file-loader vs url-loader

If we want to introduce images into the page (including img's src and background's url). When we develop based on webpack, we will encounter some problems in introducing images.

One of them is the problem of referencing paths. For example, if the background style is introduced into the background map with url, we all know that webpack will eventually package each module into a file, so the url path in our style is relative to the entry html page, not to the path where the original css file is located. This will cause the introduction of the image to fail. This problem is solved with file-loader, file-loader can parse the introduction of url in the project (not limited to css), according to our configuration, copy the picture to the appropriate path, and then according to our configuration, modify the packaged file reference path to point to the correct file.

In addition, if there are more pictures, a lot of http requests will be sent, which will degrade the performance of the page. This problem can be solved through url-loader. Url-loader will encode the incoming images to generate dataURl. It is equivalent to translating the picture data into a string of characters. Then package this string of characters into a file, and eventually you only need to introduce this file to access the picture. Of course, if the picture is large, coding consumes performance. Therefore, url-loader provides a limit parameter, files smaller than limit bytes will be converted to DataURl, and files larger than limit will also use file-loader for copy.

* * what is the relationship between url-loader and file-loader? * * to put it simply, url-loader encapsulates file-loader. Url-loader does not depend on file-loader, even if you use url-loader, you only need to install url-loader, not file-loader, because url-loader has built-in file-loader. Through the above introduction, we can see that url-loader work is divided into two situations: 1. If the file size is less than the limit parameter, url-loader will convert the file to DataURL;2. If the file size is greater than limit,url-loader, file-loader is called for processing, and the parameters are passed directly to file-loader. So we just need to install url-loader.

About when background url introduced the picture

According to the above theory, if I introduce the image in a relative path, webpack will require it.

Background: url (". / iphonexs.png") 0 no-repeat

As a matter of fact, I see that the background of the page becomes:

Background: url (/ resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat

This is the result of processing according to the configuration of url-loader.

Or use the dynamic style method:

This is the end of the article on "how to dynamically load local pictures on vue". Thank you for reading! I believe you all have a certain understanding of "how to dynamically load local pictures in vue". If you want to learn more, you are 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report