来自 Vue.js 组件的 Img 元素未渲染到 Laravel 生产环境中答案

【问题标题】：Img element from Vue.js component is not rendered into Laravel production environment来自 Vue.js 组件的 Img 元素未渲染到 Laravel 生产环境中
【发布时间】：2021-10-27 02:30:39
【问题描述】：

我正在使用来自resources/images 目录的npm run prod 为生产编译img element。编译用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 element 在 vue component 内：

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

并编译为public/images dir:

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

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 elements 但它没有。有什么解决方法吗？

规格：

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

【问题讨论】：

愚蠢的问题，但是你编译你的 vue 应用程序了吗？您需要某种解析器（如 webpack）将您的开发代码转换为在浏览器中工作的代码。如果没有某种编译或资源加载器，浏览器将无法处理require
@AramBecker 是的，我在问题中添加了webpack.mix.js 和welcome.blade.php。就像我说的，图像从resources/images 编译到public/images。

标签： javascript php html laravel vue.js

【解决方案1】：

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

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

参考：https://github.com/JeffreyWay/laravel-mix/issues/2756

【讨论】：

【解决方案2】：

你能不能用 <img src="images/portrait.png" id="portrait" alt="">?

【讨论】：

不，当我尝试 img element 甚至没有被编译为 public/images 时