代码之家 › 专栏 › 技术社区 › zmbq

Vue回退到资产映像

vue.js

zmbq · 技术社区 · 6 年前

/src/assets/images/default.png

因此,我创建了一个计算属性,返回图像URL entity.url 或上面的URL。

index.html . 这是因为在运行时返回静态资产URL时,Vue对静态资产的处理不起作用。

如果我硬编码URL,图像会正确显示 @/assets/images/default.png ,但如果我将其作为字符串返回(删除 @

如何使Vue处理动态引用的静态资产?

2 回复 | 直到 6 年前

Husam Ibrahim 6 年前

v-if / v-else entity.url 存在。。

<img v-if="entity.url" :src="entity.url" />
<img v-else src="@/assets/images/default.png" />

RAHIL KHAN 6 年前

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    imageData:{ imgUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png',
    
    }
  },
  methods: {
  	getUrlData(data) {
    	if (data && data.imgUrl) {
      	return data.imgUrl
      }
      else {
      	return "@/assets/images/default.png"
      }
    }
  }
})

<div id="app">
  <p>{{ message }}</p>
  <img :src="getUrlData(imageData)">
</div>

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前