Home > Web Front-end > JS Tutorial > body text

Detailed explanation of examples of using alias paths to reference static image addresses in webpack+vue

小云云
Release: 2018-01-16 10:29:23
Original
2076 people have browsed it

Everyone knows the benefits of aliases in webpack, but in vue templates, problems always arise when using aliases for image addresses. For a long time, no solution was found. I thought it was because of webpack. This article mainly introduces the use of alias paths in webpack+vue to reference static image addresses. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to have a look, I hope it helps everyone.


alias: {
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets'),
 'components': path.resolve(__dirname, '../src/components')
}
Copy after login
Copy after login


<template>
 <img src="assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(asset/images/bg.jpg)
}
</style>
Copy after login

In the above code, you will find that only the introduction of style.css is successful, and the image address and background image address will be resolved. Failure...

After various searches to find the reason (at this time, you will find that Baidu search for these technical contents is really a fighter among garbage), and finally found the reason...

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~

is to alias Add a ~

in front and the final code is written as:


alias: {
 &#39;src&#39;: path.resolve(__dirname, &#39;../src&#39;),
 &#39;assets&#39;: path.resolve(__dirname, &#39;../src/assets&#39;),
 &#39;components&#39;: path.resolve(__dirname, &#39;../src/components&#39;)
}
Copy after login
Copy after login


<template>
 <img src="~assets/images/logo.jpg" />
</template>
<script>
import &#39;assets/css/style.css&#39;
</script>
<style>
.logo {
 background: url(~asset/images/bg.jpg)
}
</style>
Copy after login

means: tell the loader that it is a module , instead of a relative path

Note: Only the static file address in the template and the static file address in the style need to be added ~, in the script, write whatever the alias is defined as.
This is it , I have been struggling with the problem for several months, and finally solved it...

By the way, I will post the list of aliases I use:


alias: {
  &#39;assets&#39;: path.resolve(__dirname, &#39;../src/assets&#39;),
  &#39;src&#39;: path.resolve(__dirname, &#39;../src&#39;),
  &#39;~api&#39;: path.resolve(__dirname, &#39;../src/api&#39;),
  &#39;~components&#39;: path.resolve(__dirname, &#39;../src/components&#39;),
  &#39;~pages&#39;: path.resolve(__dirname, &#39;../src/pages&#39;),
  &#39;~router&#39;: path.resolve(__dirname, &#39;../src/router&#39;),
  &#39;~store&#39;: path.resolve(__dirname, &#39;../src/store&#39;),
  &#39;~utils&#39;: path.resolve(__dirname, &#39;../src/utils&#39;)
}
Copy after login

Related recommendations:

PHP regular code example for obtaining all image addresses on the page

Summary and sharing of regular expression methods for processing image addresses and img tags

How to replace the image address (img src) in a string with JavaScript regular expression

The above is the detailed content of Detailed explanation of examples of using alias paths to reference static image addresses in webpack+vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template