如何在 vue 组件中使用 Laravel 资产
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52576512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can use laravel assets in vue component
提问by Mahdi Mirhendi
i use Laravel 5.7 with vue js
i try to show a image element in vue components but i cant use Laravel blades helpers !
我使用带有 vue js 的 Laravel 5.7
我尝试在 vue 组件中显示图像元素，但我不能使用 Laravel 刀片助手！
<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">
its show me Error
它给我看错误
So How Can I Use Assets Helper in vue components?
那么如何在 vue 组件中使用 Assets Helper 呢？
回答by utdev
The vue component file has the file ending of .vue, you can't use the blade stuff directly in those files, you need to do following:
vue组件文件以.vue结尾，不能直接在这些文件中使用blade的东西，需要做如下操作：
Vue component have so called props properties so for example if you create following component:
Vue 组件具有所谓的 props 属性，例如，如果您创建以下组件：
// TestComponent.vue
<template>
<div>
<p :users="users"></p>
</div>
</template>
<script>
export default {
props: ['users'],
data: () => ({
// ...
}),
}
</script>
You can pass data to the props attributes in this case users, so you can call the component in your blade file and add your users from your server side to the props field like this:
在这种情况下，您可以将数据传递给道具属性用户，因此您可以调用刀片文件中的组件并将您的用户从服务器端添加到道具字段，如下所示：
<test-component :users="{{ $users }}"></test-component>
For images you need to adept this and add your image source.
对于图像，您需要熟练掌握并添加图像源。
Don't forget to init the component in your app.js file
不要忘记在 app.js 文件中初始化组件
Vue.component('test-component', require('./components/TestComponent.vue'));
回答by Udara Chathuranga
Blade not running on vue component file(.vue files), If you only use just a image path(<img src=" ">) move to images folder to laravel public directory and then you can directly use the image path
Blade 未在 vue 组件文件（.vue 文件）上运行，如果您只使用图像路径（<img src=" ">）移动到图像文件夹到 Laravel 公共目录，然后您可以直接使用图像路径
<img src="/images/users/avatar-1.jpg" width="35 px" height="23px">
<img src="/images/users/avatar-1.jpg" width="35 px" height="23px">
Otherwise you have to call vue props like this answer
否则你必须像这个答案一样调用 vue props
