javascript - Vue.js 组件中的 Img 元素未渲染到 Laravel 生产环境中

我正在使用 resources/images 目录中的 npm run prod 编译用于生产的 img 元素。编译是通过webpack.mix.js完成的:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css').vue();

welcome.blade.php 底部:

<body id="body">
  <div id="app">
    <app></app>
  </div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
</html>

img 元素位于vue 组件内:

  <img :src="require('../images/portrait.png')" id="portrait" alt="">

并被编译到public/images目录:

如您所见，portrait.png 被编译为 public/images。但是，一旦我尝试使用 php artisanserve 运行应用程序，图像就不会显示在浏览器中。这是唯一未显示的图像。浏览器控制台显示:

Failed to load resource: the server responded with a status of 404 (Not Found)

在初始页面加载时:

GET http://127.0.0.1:8000/require(%60../images/portrait.png%60) 404 (Not Found)

页面刷新。

根据这个img src thread on github require 应该适用于 img 元素，但事实并非如此。有什么解决办法吗？

规范:

OS: Windows 10
Vue.js: 4.5.13
Laravel: 8.55.0

最佳答案

将图像解析为模块似乎存在问题。您可以尝试将 .default 添加到 require 语句中吗？例如

<img :src="require('../images/portrait.png').default" id="portrait" alt="">

关于javascript - Vue.js 组件中的 Img 元素未渲染到 Laravel 生产环境中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68948516/