代码之家  ›  专栏  ›  技术社区  ›  kirschkern

图像具有绝对路径-如何在LaravelMix中使用子目录URL

  •  6
  • kirschkern  · 技术社区  · 8 年前

    我的Laravel Mix应用程序将放置在服务器的一个子目录中,如: http://localhost/pat-os-server/public/

    <img id="logo" src="../assets/img/pat_logo.png">
    

    <img id="logo" src="/images/pat_logo.png">
    

    图片/pat_logo.png /pat os server/public/images/pat_logo.png (绝对)

    我已经尝试在webpack.mix中设置输出路径。js如下:

    mix.setPublicPath('/pat-os-server/public/');
    mix.setResourceRoot('/pat-os-server/public/');
    

    但这不会改变输出路径。它仍然是 /图片/pat_logo.png /pat os server/public/images/pat_logo.png

    我在调用其他方法之前放置了路径设置方法,因此我当前的webpack.mix。js如下所示:

    const { mix } = require('laravel-mix');
    
    mix.setPublicPath('/pat-os-server/public/');
    mix.setResourceRoot('/pat-os-server/public/');
    mix.js('resources/assets/js/app.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');
    

    如何获得图像的相对输出路径或更改绝对路径?

    谢谢你的支持。

    编辑

    我刚刚意识到,在我的laravel项目中创建了一个子文件夹“pat os server”,并将所有编译的项目文件复制到此子文件夹中。所以我似乎误解了setPublicPath设置。

    不要 要将输出文件放在另一个文件夹中。我希望项目中的URL指向正确的路径,该路径不是主机/根目录,而是子目录。

    1 回复  |  直到 8 年前
        1
  •  14
  •   kirschkern    8 年前

    经过几个小时的搜索和试用,我回答了自己的问题。

    现在是我的webpack.mix。js如下所示:

    const { mix } = require('laravel-mix');
    mix
      .setResourceRoot("")
      .js('resources/assets/js/app.js', 'public/js')
      .sass('resources/assets/sass/app.scss', 'public/css');
    

    <img id="logo" src="images/pat_logo.png">
    

    使用 mix.setResourceRoot("/") 要获取根的绝对路径(应为默认路径):

    <img id="logo" src="/images/pat_logo.png">
    

    或者使用其他类似 mix.setResourceRoot("anything/there/") :

    <img id="logo" src="anything/there/images/pat_logo.png">
    

    干杯