我认为这应该很简单，但是我在如何在 Vue 单文件组件中导入和使用图像时遇到了一些麻烦。有人可以帮我怎么做吗？这是我的代码片段：
<template lang="html">
<img src="zapierLogo" />
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
}
</script>
<style lang="css">
</style>
我曾尝试使用:src,src="{{ zapierLogo }}"等。但似乎没有任何效果。我也找不到任何例子。有什么帮助吗？
很简单：
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
取自 vue cli 生成的项目。
如果您想将图像用作模块，请不要忘记将数据绑定到您的 Vuejs 组件：
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
import image from "./assets/logo.png"
export default {
data: function () {
return {
image: image
}
}
}
</script>
<style lang="css">
</style>
还有一个较短的版本：
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
如果你想通过 webpack 加载它们，你可以简单地使用:src='require('path/to/file')'确保你使用:，否则它不会像 Javascript 一样执行 require 语句。
在打字稿中，您可以执行几乎完全相同的操作：:src="require('@/assets/image.png')"
为什么以下通常被认为是不好的做法：
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
使用 Vue cli 构建时，webpack 无法确保资产文件将保持遵循相对导入的结构。这是由于 webpack 试图优化和分块出现在 assets 文件夹中的项目。如果您希望使用相对导入，您应该从static文件夹中执行此操作并使用：<img src="./static/logo.png">
我最近遇到了这个问题，我正在使用 Typescript。如果您像我一样使用 Typescript，那么您需要像这样导入资产：
<img src="@/assets/images/logo.png" alt="">
您也可以像这样使用root快捷方式
<template>
<div class="container">
<h1>Recipes</h1>
<img src="@/assets/burger.jpg" />
</div>
</template>
虽然这是 Nuxt，但它应该与 Vue CLI 相同。
这些都适用于 JavaScript 和 TypeScript
<img src="@/assets/images/logo.png" alt="">
或者
<img src="./assets/images/logo.png" alt="">
..当其他一切都失败时，就像在我的情况下，当我尝试导入我在多页 Vuelectro-app 中多次使用的占位符时 - 但这次是在一个子子组件中，其中没有一个建议的解决方案起作用（就像他们通常做的那样） ..
<template>
<div id="app">
<img :src="image"/>
</div>
</template>
<script>
export default {
data() { return {image: null, ...} },
methods: {
solveImage(){
const path = require('path')
return path.join(process.cwd(), '/src/assets/img/me.jpg')
},
...
},
mounted: {
this.image = this.solveImage()
...
}
}
</script>
..应该这样做。
如果它在 created-lifecycle-hook 中效果更好，或者您更愿意在全局范围内要求路径并调用
this.image = path.join(...)
在其中一个钩子中-您应该测试自己。
我遇到了quasar一个基于移动框架的问题vue，tidle 语法~assets/cover.jpg在普通组件中有效，但在我的动态定义组件中无效，该组件由
let c=Vue.component('compName',{...})
最后这项工作：
computed: {
coverUri() {
return require('../assets/cover.jpg');
}
}
<q-img class="coverImg" :src="coverUri" :height="uiBook.coverHeight" spinner-color="white"/>
根据https://quasar.dev/quasar-cli/handling-assets的解释
In *.vue components, all your templates and CSS are parsed by vue-html-loader and css-loader to look for asset URLs. For example, in <img src="./logo.png"> and background: url(./logo.png), "./logo.png" is a relative asset path and will be resolved by Webpack as a module dependency.
我也面临同样的问题来显示资产图像。最后，这两种方式对我来说都很好-
<img src="@/assets/img/bg1.png" />
和
<img :src="require('@/assets/img/bg1.png')" />
对于 Vue 3，我必须使用
<template>
<div id="app">
<img :src="zapierLogo" />
</div>
</template>
<script>
import zapierLogo from 'images/zapier_logo.svg'
export default {
...
data: function () {
return {
zapierLogo
}
}
}
</script>
两者似乎src="@/assets/burger.jpg"都src="../assets/burger.jpg"不起作用。