来自子目录图像的 Laravel vuejs 未显示

Question

最近我正在使用vuejs 我的项目在子目录中，其中我的图像未显示来自public/images/ 目录我搜索了很多找到许多解决方案，但对我没有任何帮助。但在本地运行良好。

代码示例

主页.vue

<div class="widget-bg-image absolute">
  <div class="widget-container">
    <div class="image">
      <img width="629" height="424" src="/images/big-banner/3.png" class="img-fluid" alt="">
    </div>
  </div>
</div>

我在webpack.mix.js 中设置了根路径，比如mix.setResourceRoot('/subdirectory/')，但什么也没发生我还设置了公共路径，比如mix.setPublicPath('/subdirectory/')

我试过了：

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig(require('./webpack.config'))

if (mix.inProduction()) {
    mix.version();
    mix.setResourceRoot(`/${process.env.BASE_URL}/`)
}

我想要我的图片路径

  <img width="629" height="424" src="my-host/subdirectory/images/big-banner/3.png">

还有其他方法吗？请帮帮我

Answer 1

将BASE_URL 设置为您的项目。在.env文件集中

BASE_URL=my-host/subdirectory/

设置

<img width="629" height="424" src={process.env.BASE_URL + "images/big-banner/3.png"}>

Answer 2

我的方法是在刀片模板中添加全局视图模型配置对象 (VM)：

@section('footer')
<script>
    var vm = {
        root: '{{ url('/') }}' + "/",    // could include other variables as well, such as translations and/or session-objects from PHP
    } 
</script>
@endsection

我使用的是 Vue 3，所以我将此变量添加到 Vue 应用程序：

app.config.globalProperties.$vm = window.vm;

// or in Vue 2

Vue.prototype.$vm = window.vm;

这样您就可以将图片的根路径添加到模板中：

<img :src="$vm.root + 'images/file.jpg'" />

只要您可以使用浏览器在该网址访问文件，就可以了。否则问题可能是文件在给定的 url 上并不真正存在，所以如果有任何问题，请检查路径。