我的Vue里有这个.js模板:

<img src="/media/avatars/{{joke.avatar}}" alt="">

它在一个循环中呈现Jest .其他字段渲染良好,但对于图像,我在控制台中遇到以下错误:

  • src="/media/avatars/{{joke.avatar}}":属性内部的插值已被删除.使用v-bind或冒号缩写

我也使用了v-bind:src="...,但我得到了invalid expression个错误.

我该怎么解决这个问题?

推荐答案

试试这个:

<img v-bind:src="'/media/avatars/' + joke.avatar" /> 

不要忘记路径字符串周围的单引号.

joke: {
  avatar: 'image.jpg'
}

这里有一个正在运行的演示:http://jsbin.com/pivecunode/1/edit?html,js,output

Vue.js相关问答推荐

为什么v-show需要组件的包装元素?

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

VITE:无法为VUE单文件组件加载URL

使用项目和字段,列跨度为 2 的 Bootstrap-vue 表

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

Shopware 6,使用 vue-test-utils 进行Jest 测试:渲染模板上的意外行为

将函数作为属性传递给 Vue 组件

VueJS:在组件之间使用全局对象的最佳实践?

如何在map中添加新的标记 onclick?

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

使用 vue.js 的 axios 预检失败错误 301

为什么当我 Select 第二个输入框时音译transliteration不起作用?

vuex: unknown getter: user

如何告诉 Vue 应用使用 Firebase 模拟器?

Vue.js:从 parent父Vue 获取数据

如何克隆props对象并使其无react

Vue-i18n '无法读取 Proxy.Vue.$t 处未定义的属性 '_t'

'不提供名为'createRouter'的导出'' vue 3、vite 和 vue-router

带有后退按钮的 Vue.js 路由

如何从组件内的单点捕获 vuejs 错误