vue.js - 如何在 Vue Js 中加载静态图像
问题描述
我有一个组件,它接受一个 url 的 prop 字符串。它可以是远程图片或资产文件夹中的本地静态资产。
目录结构:
-assets/
- logo.png
-app.vue
-components/
-ImageTest.vue
ImageTest.vue
<template>
<div>
{{imagelink}}
<div style="width: 150px; height: 150px; background-color: red">
<img :src="imglink" alt="" height="150px" width="150px">
</div>
</div>
</template>
<script>
export default {
name: "ImageTest",
props:{
imagelink: String,
},
computed: {
// a computed getter
imglink: function () {
console.log(this.imagelink)
return (this.imagelink)
}
}
}
</script>
<style scoped>
</style>
应用程序.vue
<template>
<div id="app">
<ImageTest imagelink="./assets/logo.png" ></ImageTest>
<ImageTest imagelink="https://static.raymondcamden.com/images/banners/gate.jpg" ></ImageTest>
</div>
</template>
<script>
import ImageTest from './components/ImageTest.vue'
export default {
name: 'app',
components: {
ImageTest
}
}
</script>
<style>
</style>
输出:(静态文件不起作用,但我可以从开发者检查器工具中看到url是在src中加载的)
解决方案
由于图像链接实际上是在 中使用的ImageTest.vue
,因此您可能需要删除这些点。
这个
<ImageTest imagelink="./assets/logo.png" ></ImageTest>
变成
<ImageTest imagelink="/assets/logo.png" ></ImageTest>
推荐阅读
- python - 如何使用 Python 触发 Azure Runbook
- r - 在 gap.plot 中显示完整的绘图线
- html - 我正在尝试将一些图像堆叠在一起,但我丢失了背景
- java - FileOutputStream max_allowed_dequeued_buffers 3
- c# - 如何从树资源中隐藏日试点计划程序的白框图标?
- java - 如果在 Thymeleaf 中使用 AND/OR
- flutter - 等待小部件加载其组件
- javascript - 无法在 React 中导入类
- java - 如何从java中的字符串中删除\"?
- sonarqube - 使用 SonarQube Web API 检索条件覆盖信息