Question

我是VueJS的新手并且很难处理这种情况。

display.vue

<template>
   <img :src="getLogo(logo)" /> 
</template>

<script>
 export default {
  methods: {
    getLogo(logo){
        return '../assets/'+logo;
    }
  }
}
</script>

我在该代码上遇到404错误。

但我尝试不使用getLogo()功能并显示它。

<template>
   <img src="../assets/logo.svg" /> 
</template>

图像结构是：

src/assets/logo1.svg

webpack.base.conf.js

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

这里有人可以帮助我使用getLogo功能显示图像吗？非常感谢你！

Answer 1

我估计在使用v-bind:src时应该如下

<img v-bind:src="'../assets/logo.svg'">
<!-- or shorthand -->
<img :src="'../assets/logo.svg'">

注意' '

使用<img src="../assets/logo.svg" />时，您不需要绑定字符串，因此这就是它的工作原理。

Answer 2

我将图像文件夹从/ src / assets /移至/ public / pictures并将图像源更改为/pictures/pic.jpg，并且可以正常工作，但是我不确定这是否是正确的方法

VueJS - 显示图像的功能

2 个答案: