Basic knowledge:
1, VUE.js When loading the local image path in the script, you need to use require, but not in the HTML tag;
2, VUE.js In principle, it is not supported to load the local image path containing parameters. Even if require is used, an error will still be reported because require.js
and
respectively 3. In many cases, we need to take data from the database and compile it, including pictures. In general, in addition to the URL of the network image and the binary image, it may also contain the local image path.
Specific operation:
<template>
<img :src="imgA"/>
</template>
<script>
export default {
computed: {
the name of your function (optional parameter) {
return require('local folder within some project (aka root)' + arguments)
}
},
methods: {
your function name2 (optional parameter2) {
this.imgA = your function name (optional parameter)
}
}
}
</script>
Several key points:
1. Functions must be stored in computed, which is a dynamic calculation block. Unlike methods, require contains dynamic parameters and will not report errors;
2 2. A root directory must be provided, and the following parts can be played as you like. The root directory is necessary. During the operation, it will actually get all the files under the root directory, and then find what you need;
3. When calling, assign the function name (optional parameter) of this. You to the image path parameter (IMGA in this example).
If there is any unclear description, please leave a message.
Read More:
- [Solved] Failed to load plugin ‘vue‘ declared in ‘.eslintrc.js‘: createRequire is not a function
- Solution to build error in Vue project (error in static/JS)/vendor.xxxxx.js from UglifyJs)
- Solution to some map files in JS folder after Vue packaging (remove the map. JS file)
- [Solved] Vite Error: Failed to load module script: Expected a JavaScript module script but the server…
- Cesium.js:1 Error loading image for billboard: [object Event]
- [Solved] vue.esm.js?efeb:591 [Vue warn]: Error in event handler for “click“: “TypeError: Cannot read property
- Vue mutui identify (Image Verification Code)
- [Solved] Vue 3 Script Setup ESLint Error: ‘defineProps‘ is not defined
- Vue JS import font.css error [How to Solve]
- Vue Import three.JS error: Unexpected token [How to Solve]
- Vue Package Image Error: Syntax Error: Error: ‘**\node_modules\pngquant-bin\vendor\pngquant.exe‘
- [Solved] Element form method resetfields() error: vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading ‘indexOf’)
- vue.config.js build Package UglifyJsPlugin to clear console and print console.log Error: `warnings` is not a supported option
- PDF.js load PDF Error: Message: failed to fetch
- [Solved] webpack Package Error: ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolv
- [Solved] Vue beforeeach error: RangeError: Maximum call stack size exceeded at eval (permission.js?223d:39)
- [Solved] Vue item packaging error: Failed to load resource: the server responded with a status of 404 (Not Found)
- [Solved] Nuxt Import qrcodejs2.js / QRCode.js Error: document is not defined
- [Solved] ERROR Error loading vue.config.js: ERROR Error: Command failed: git describe
- [Solved] Layui 404 Error: Static resources cannot load layui.js and layui. css