vue用require引入的图片在生产环境无法显示
时间: 2024-02-01 09:15:40 浏览: 81
vue css 引入asstes中的图片无法显示的四种解决方法
在 Vue 中,使用 `require` 引入图片时,Webpack 会将图片转换成 base64 编码,因此在开发环境中可以正常显示。但在生产环境中,Webpack 会将图片打包成单独的文件,此时需要正确配置 Webpack 才能正确加载图片。
首先,在 Webpack 配置文件中,需要添加针对图片的 loader,例如:
```javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 小于10kB的图片转成base64编码的dataURL字符串写到代码中
name: 'img/[name].[hash:7].[ext]' // 其他的图片生成单独的文件
}
}
]
}
};
```
然后,在 Vue 组件中引入图片时,需要使用相对路径,并且不能使用 `~` 开头,例如:
```html
<template>
<div>
<img :src="require('@/assets/logo.png')" alt="Logo">
</div>
</template>
```
最后,在打包时需要将 `publicPath` 配置为正确的路径,例如:
```javascript
module.exports = {
// ...
output: {
publicPath: '/my-project/' // 项目部署的路径
}
};
```
这样就可以在生产环境中正确显示图片了。
阅读全文