来自 Vue.js 组件的 Img 元素未渲染到 Laravel 生产环境中
Posted
技术标签:
【中文标题】来自 Vue.js 组件的 Img 元素未渲染到 Laravel 生产环境中【英文标题】：Img element from Vue.js component is not rendered into Laravel production environment 【发布时间】：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" >
并编译为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。
【参考方案1】：
将图像解析为模块似乎存在问题。您可以尝试将.default 添加到require 语句中吗？例如
<img :src="require('../images/portrait.png').default" id="portrait" >
参考：https://github.com/JeffreyWay/laravel-mix/issues/2756
【讨论】：
【参考方案2】：你能不能用
<img src="images/portrait.png" id="portrait" alt="">?
【讨论】：
不，当我尝试img element 甚至没有被编译为 public/images 时以上是关于来自 Vue.js 组件的 Img 元素未渲染到 Laravel 生产环境中的主要内容，如果未能解决你的问题，请参考以下文章
渲染组件后，Vue.js将单击事件绑定到v-html中的锚元素[重复]