Question

我为放置图片的public文件夹设置了别名。

因此它们位于public/images中。对于某些类型的图像，我有一个子文件夹-在这种情况下，是卡片品牌。

他们在public/images/card-brands

这是我的别名配置：

mix.webpackConfig({
   resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
         '@': __dirname + '/resources/js',
         '@public' : __dirname +  '/public'
      },
   },
})

我正在将图像导入到vue组件文件中：

import amex from '@public/images/card-brands/amex.svg'
import discover from '@public/images/card-brands/discover.svg'
import visa from '@public/images/card-brands/visa.svg'
import mastercard from '@public/images/card-brands/mastercard.svg'

然后在我的组件数据中使用它，如下所示：

export default {

  name: 'PaymentMethod',
  data() {
      return {
       ...
        visaSvg: visa,
        mastercardSvg: mastercard,
        discoverSvg: discover,
        amexSvg: amex,
        currentCardBrand: this.initialCurrentCardBrand
       ...
      }
  },
props: {
...
initialCurrentCardBrand: String,
...
}
computed: {
 getCurrentCardBrandSvg() {
        switch (this.currentCardBrand) {
            case 'mastercard':
                return this.mastercardSvg;
            break;
            case 'visa':
                return this.visaSvg;
            break;
            case 'amex':
                return this.amexSvg;
            break;
            case 'discover':
                return this.discoverSvg;
            break;
        }
    }
}
...

最后，我在模板和图像src上使用它：<img class="w-10" :src="getCurrentCardBrandSvg">

现在，即使图像和我的导入路径使用的是card-brands子文件夹，生成的URL也会忽略它，而只是在根images文件夹中查找图像。

应该是：

/public/images/card-brands/visa.svg 但它生成为 /public/images/visa.svg

如何保存子文件夹？

Answer 1

请尝试{{ asset('/images/card-brands/mastercard.svg')) }} 我在Laravel中遇到了类似的问题。我使用了上面的格式。如果我输入的不对，请纠正我。

Answer 2

编辑：这可能有点错误。对于通过javascript导入图像，它可以正常工作，但是我认为通过laravel在刀片模板中获取图像仍然需要公共文件夹中的图像。

问题不知道我应该将图像文件夹放在资源文件夹中而不是公共文件夹中。

Laravel Mix将像编译JS和SCSS一样编译图像并将其自动公开。

因此，我在资源中创建了一个图像文件夹，在公共位置删除了我手动创建的图像文件夹，并做了一个别名：

 alias: {
         '@images':  __dirname + '/resources/images'
    }

现在我可以在vue组件中链接到它了。

import amex from '@images/card-brands/amex.svg'
import discover from '@images/card-brands/discover.svg'
import visa from '@images/card-brands/visa.svg'
import mastercard from '@images/card-brands/mastercard.svg'

一旦我运行npm run dev或npm run prod

，生成的图像将自动在根目录下公开放置。

Laravel Mix从图像路径中删除了子文件夹

2 个答案: