About how vue implements dynamic loading of image src

Below I will share with you a solution to dynamically loading image src based on vue. It has a good reference value and I hope it will be helpful to everyone.

I haven’t blogged for a long time. I don’t know what I’ve been busy with recently. Anyway, I feel quite busy. In the group, I saw friends who are new to Vue asking about dynamic loading of images in Vue. They always get 404. situation, this article will briefly explain why it occurs and what are the solutions.

First of all, let’s explain the difference between the two files of vue-cli’s assets and static, because this will be helpful for you to understand the following solutions

assets: During the project compilation process, it will be processed and parsed into module dependencies by webpack. Only relative path forms are supported, such as and background:url(./logo.png), "./logo.png" is a relative resource path, which will be parsed by webpack as a module dependency

#static: The files in this directory will not be processed by webpack, which simply means that third parties are stored The location of the file will not be parsed by webpack. It will be copied directly to the final packaging directory (default is dist/static). These files must be referenced using absolute paths, which are determined through the build.assetsPublic and build.assertsSubDirectory links in the config.js file. Any file placed in static/ needs to be referenced in the form of an absolute path: /static[filename]

According to the characteristics of webpack, in general, static files will not change. The third file, asserts Put files that may change

The problem comes, use js to dynamically load assets or pictures of this file and a 404 status code appears

Code example

<li v-for="(item,index) in images" :key="index">
<img  src="/static/imghwm/default1.png"  data-src="item.src"  class="lazy"  : alt="About how vue implements dynamic loading of image src" ></li>
//js部分
data(){
 return {
 images:[{src:&#39;./1.png&#39;},{./2.png}]
 }
}

When I ran it, I found that the image was not displayed, and the error code was 404.

Reason: In webpack, images are used as modules. Because they are dynamically loaded, the url- The loader will not be able to parse the image address, and then the path will not be processed after npm run dev or npm run build [The path parsed by webpack will be parsed as /static/img/[filename].png, and the full address is localhost:8080/ static/img/[filename].png】

Solution:

①Load the image as a module , such as images:[{src:require('./1.png')},{src:require('./2.png')}] so that webpack can parse it.

②Put the images in the static directory, but the absolute path must be written such as images:[{src:”/static/1.png”},{src:”/static/2.png”}] In this way, the image will also be displayed. Of course, you can also shorten the writing length of the path by defining it in webpack.base.config.js.

Of course you said that when there are too many local pictures, it would be troublesome to write like this. Well, in fact, we simplify the operation like this.

Step one: Create a new json folder in static

Part 2: Fill in the json file, as shown in the figure

##Part 3: Introduce json into the response vue file , just parse the reference

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Cross-domain issues with proxyTable in the vue-cli project

express builds query server

Use js custom trim function to delete spaces at both ends

The above is the detailed content of About how vue implements dynamic loading of image src. For more information, please follow other related articles on the PHP Chinese website!