我在 vue js 中使用 laravel
我想在 vue 组件中显示一个图像元素,但我不能使用 Laravel 刀片助手!
<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">
它告诉我错误
那么如何在vue组件中使用Assets Helper呢?
原文由 Mahdi Mirhendi 发布,翻译遵循 CC BY-SA 4.0 许可协议
我在 vue js 中使用 laravel
我想在 vue 组件中显示一个图像元素,但我不能使用 Laravel 刀片助手!
<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">
它告诉我错误
那么如何在vue组件中使用Assets Helper呢?
原文由 Mahdi Mirhendi 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以采用不同的方法,更符合您在刀片模板中使用 asset
的方式。
在布局的头部部分创建一个对基础资源路径的全局引用,就像这样
<script>
window._asset = '{{ asset('') }}';
</script>
下一步是创建一个 Vue 混合宏。在我的例子中,一个 trans.js
文件包含以下内容:
module.exports = {
methods: {
asset(path) {
var base_path = window._asset || '';
return base_path + path;
}
}
}
确保在 Vue 之后包含它,例如:
window.Vue = require('vue');
Vue.mixin(require('./asset'));
然后你可以在你所有的 Vue 组件中使用它。您的原始代码如下所示
<img :src="asset('admin/images/users/avatar-1.jpg')" width="35 px" height="23px">
请注意缺少 {{
并添加 :
在这种情况下,因为它用作属性值。
原文由 BBog 发布,翻译遵循 CC BY-SA 4.0 许可协议
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
4 回答1.8k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
vue组件文件以.vue结尾,不能直接在这些文件中使用blade的东西,需要做如下操作:
Vue 组件具有所谓的 props 属性,例如,如果您创建以下组件:
在这种情况下,您可以将数据传递给用户的 props 属性,因此您可以调用 blade 文件中的组件,并将您的用户从服务器端添加到 props 字段,如下所示:
对于图像,您需要熟悉这一点并添加您的图像源。
不要忘记在 app.js 文件中初始化组件