Question

在我的Laravel项目中，我使用vue。在我的Vue组件中，我想显示静态图像，但该图像不显示

 <img style="border:10px solid #000;"  :src="'public/images/principle.jpg'" alt="">

Answer 1

错误是因为您要在vue绑定中定义一个字符串

:src=""

这需要一个JavaScript常量

你可以做

src="/images/test.png"

但这会在您导航到子路线和页面时引起错误。

在Laravel中有一个资产助手，看起来像这样

asset('images/test.png')

这将输出完整的网址

http://localhost:8000/images/test.png

此资产助手在PHP中很有用。但是不适用于JS

因此您可以使用vue mixin使其可用

在HTML的头部

添加此

<script> window._asset = '{{ asset('') }}'; </script>

这会将资产助手绑定到窗口

接下来在您的app / js中创建一个mixin

它将看起来像这样

module.exports = {
    methods: {
        asset(path) {
            var base_path = window._asset || '';
            return base_path + path;
        }
    }
}

最后一步是需要mixin

在您的app.js中

Vue.mixin(require('./asset'));

然后您可以在vue中使用它

<img :src="asset('images/test.png')" />

Answer 2

 <img style="border:10px solid #000;"  src="/images/principle.jpg" alt="">

如何在vue中显示静态图片？

2 个答案: