使用responsive-loader，我期待一個物件的回傳。相反，我收到一個 base64 字串，即data:image/jpeg;base64,bW9kdWxlLmV....
不幸的是，我在其他帖子上找到的幾個答案并沒有解決我的問題。
Vue 3.2.31、回應式加載器2.3.0、夏普0.30.3
vue.config.js
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
const ResponsiveLoaderSharp = require('responsive-loader/sharp')
module.exports = {
chainWebpack: config => {
config.plugin('polyfills').use(NodePolyfillPlugin)
config.module
.rule('images')
.use('url-loader')
.loader('responsive-loader')
.options({
adapter: ResponsiveLoaderSharp,
name: 'img/[name]-[width].[hash:8].[ext]',
format: 'webp',
quality: 60,
sizes: [320, 640, 960, 1200],
})
},
}
Vue 模板
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup(){
const myImage = require('@/assets/my-image.jpg')
console.log(myImage)
}
})
</script>
uj5u.com熱心網友回復：
問題在于處理 Webpack 的新資產模塊。
https://webpack.js.org/guides/asset-modules/
這是開始編譯的 Vue3 Webpack 配置：
/* config.module.rule('images') */
{
test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
type: 'asset',
generator: {
filename: 'img/[name].[hash:8][ext]'
}
},
要修改，type: 'asset'必須覆寫type: 'javascript/auto'以防止資產重復。
使用chainWebpack（在我迄今為止看到的任何檔案中都沒有找到）：
config.module
.rule('images')
.type('javascript/auto')
.use('responsive')
.loader('responsive-loader')
.options({
adapter: require('responsive-loader/sharp'),
format: 'webp',
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/454072.html
標籤：javascript 打字稿 Vue.js 网页包 Vuejs3