主页 / 问题 / 1092034
Accepted
Рустам Демонов
Asked:2020-03-08 09:58:25 +0000 UTC2020-03-08 09:58:25 +0000 UTC

设置 Webpack 和 Pug，如何正确指定图片的 src

  • 772

现在半天我无法为pug文件中的图像设置正确的路径，在我看来我不明白或忽略了一些东西。

在 src 我使用 require() 并指定一个相对路径

img(src=require('../../../assets/img/logo/logo.svg'), alt='Логотип')

他找到图片并将它们添加到 dist 文件夹中，一切都应有尽有。

但是它在转换为 html 后为它们写的路径有点奇怪

<img src="{&quot;default&quot;:&quot;/images/logo.svg&quot;}" alt="Логотип">

在 DevTools 中它看起来像这样：

开发工具

{
    test: /\.pug$/, 
    loader: 'pug-loader',
    options: {
        pretty: isDev
    }
},
{
    test: /\.(png|jpg|svg|gif)$/, 
    loader: 'file-loader', 
    options:{
        name: filename('[name]','[ext]'), // filename = (name, ext) => isDev ? `${name}.${ext}` : `${name}.[hash].${ext}`;
        outputPath :  '/images/',
    }
},

自然地，图像没有加载。

webpack

1 个回答

  1. Best Answer

    需要指定

    要求（相对路径）.default

    img(src=require('../../../assets/img/logo/logo.svg').default, alt='Логотип')

    一切都会奏效 在此处输入图像描述

    • 0

相关问题