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

This article mainly shows you the "vue pictures can not load out how to do", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "vue pictures can not load out how to do" this article.

First, after the completion of the project packaging, open the overall blank 1, the cause of the path problem

In the project of vue+webpack, the reference path of css and js after the project is packaged is the absolute path, and the static will be regarded as the root directory after the project deployment, which results in the error of the file reference path.

Solution.

Change the absolute path to the relative path by modifying the configuration file.

The specific operations are as follows:

Before 1.vue-cli version 3.0,

Configure the path to the export of the bulid module in index.js under config. Because the content in index.html is introduced through the script tag, and your path is wrong, it must be blank to open it. Take a look at the default path first.

Module.exports = {build: {env: require ('. / prod.env'), index: path.resolve (_ _ dirname,'.. / dist/index.html'), assetsRoot: path.resolve (_ _ dirname,'.. / dist'), assetsSubDirectory: 'static', assetsPublicPath:' /', productionSourceMap: true

The default for assetsPublicPath is'/', which is the root directory. Our index.html and static are in the same level directory. So change it to'. /'

After 2.vue-cli version 3.0,

Configure the vue.config.js file

Module.exports = {/ / baseUrl:'./', / / vue-cli3.3 the interface is blank after the following version is packaged using the new version of publicPath:'./' / / vue-cli3.3+ using the history mode of 2 and vue-router

The default mode in the router/index.js routing configuration in src is hash. If you change it to history mode, it will be blank. So change it to hash or simply delete the mode configuration and leave it by default.

If you have to use history mode, you need to add a candidate resource that covers all situations on the server: if the URL does not match any static resources, you should return an index.html, which is your app dependency page.

/ / mode: 'history' / / the difference between vue-cli 's assets and static's two files that cannot be loaded from images in the assets directory by default

Assets: during the compilation of the project, it will be parsed into module dependencies by webpack, and only relative paths are supported, such as

And background:url (. / logo.png),'. / logo.png' is the relative resource path, and the webpack will be resolved as a module dependency.

Static: files in this directory will not be processed by webpack, which simply means that the place where third-party files are stored will not be parsed by webpack. It will be copied directly to the final package directory (default is dist/static). These files must be referenced using absolute paths, as determined by the build.assetsPublic and build.assertsSubDirectory links in the config.js file. Any file placed in static/ needs to be referenced as an absolute path: / static [filename].

According to the characteristics of webpack, generally speaking, static will not change, files in the third file, asserts will put files that may change.

Reason

In webpack, the picture will be used as a module. Because it is dynamically loaded, url-loader will not be able to resolve the image address, and then npm run dev or npm run build will cause the path not to be processed. [all paths resolved by webpack will be resolved to / static/img/ [filename] .png. The full address is localhost:8080/static/img/ [filename] .png]

Solution.

1. Load the picture as a module

For example, images: [{src:require ('. / 1.png')}, {src:require ('. / 2.png')}], so that webpack can parse it.

two。 Put the picture in the static directory

But it must be written as an absolute path such as images: [{src: "/ static/1.png"}, {src: "/ static/2.png"}] so that the picture will also be displayed, of course, you can also shorten the writing length of the path by defining it in webpack.base.config.js.

The method of simplifying the loading of local pictures

1. Create a new imageUrls folder in static

two。 Fill in the imageUrls document

{'imageUrls': [{' image1':'/ static/image/image1.png'}, {'image2':' / static/image/image2.png'}]}

3. Introduce imageUrls into the vue file of the response and resolve the reference

Import img from'.. / static/imageUrls/imageUrls.json'export default {data () {return {imageGroups: img.imageUrls} these are all the contents of the article "what to do if the picture in vue cannot be loaded". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, 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.