v-bind:src属性不能与v-for一起使用
出于某种原因，imageURL属性不起作用，即使url是正确的，但具有v-bind:src属性。
模板：
<div v-for="project in projects" :key="project.id">
<section class="project-wrapper">
<img :src="project.imageURL" alt="Project image"/> //THE PROBLEM
<h1>{{ project.title }}</h1>
<p>{{ project.about }}</p>
<router-link :to="{ name: project.routeName }" class="type-two-link">ver projeto</router-link>
</section>
</div>
脚本：
data() {
return {
projects: [
{
id: this.projectId,
title: "Minimalist Portfolio",
about: "...",
imageURL: "./minimalist-porfolio-desktop.png", //THE PROBLEM
routeName: "Minimalist Portfolio",
},
],
};
},
我做错了什么？欢迎任何帮助。
共有1个答案
我试图在模板中使用“必需（）”，但它不起作用。所以，我是这样解决的：
data() {
return {
projects: [
{
"...",
imageURL: require("../../assets/images/projects/minimalist-portfolio/minimalist-porfolio-desktop.png"),
routeSlugName: "My Portfolio",
},
],
};
},
,
您可以在这里了解更多信息：Vue.js模板中的静态图像src
-
当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下： <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> 上面的代码只传递了未完成的 todos。 而如果你的目的是有条件地跳过循环的执行
-
预期：Array | Object | number | string 用法： 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名： <div v-for="item in items"> {{ item.text }} </div> 另外也可以为数组索引指定别名 (或者用于对象的键)： <div v-for="
-
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值)
-
本文向大家介绍Vue用v-for给src属性赋值的方法，包括了Vue用v-for给src属性赋值的方法的使用技巧和注意事项，需要的朋友参考一下 我的代码结构如下面代码所示，无法执行，在img中的src属性中无法用mustache表示法 后来我将html中的代码改成如下 使用v-bind标签后，就可以正常使用了 以上这篇Vue用v-for给src属性赋值的方法就是小编分享给大家的全部内容了，希望能给
-
vue 组件批量绑定属性 v-bind="$attrs" 、 v-bind="$props" 能同时使用吗? 尝试两个都绑定 不可行
-
本文向大家介绍Vue.js常用指令汇总（v-if、v-for等），包括了Vue.js常用指令汇总（v-if、v-for等）的使用技巧和注意事项，需要的朋友参考一下 有时候指令太多会造成记错、记混的问题，所以本文在记忆的时候会采用穿插记忆的方式，交叉比对，不易出错。 本文主要讲了一下六个指令： v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲