Javascript Vue.js 模板中的静态图片 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37645243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Static image src in Vue.js template
提问by reggie
My Vue component contains some images. I want to do lazy-loading later, so I need to set the src of the images to a small image, first.
我的 Vue 组件包含一些图像。我想稍后进行延迟加载，所以我需要先将图像的 src 设置为小图像。
<template>
<div v-for="item in portfolioItems">
<a href="#{{ item.id }}">
<img
data-original="{{ item.img }}"
v-bind:src="/static/img/clear.gif"
class="lazy" alt="">
</a>
</div>
</template>
Gives me a bunch of errors, like:
给了我一堆错误，例如：
[Vue warn]: Invalid expression. Generated function body: /scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue
[Vue warn]: Error when evaluating expression "/static/img/clear.gif": TypeError: Cannot read property 'call' of undefined (found in component: )
[Vue 警告]：表达式无效。生成的函数体：/scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue
[Vue 警告]：评估表达式“/static/img/clear.gif”时出错：TypeError：无法读取未定义的属性“调用”（在组件中找到：）
webpack.config.js:
module.exports = {
// ...
build: {
assetsPublicPath: '/',
assetsSubDirectory: 'static'
}
}
回答by Syed
This solution is for Vue-2 users:
此解决方案适用于 Vue-2 用户：
- In
vue-2if you don't like to keep your files instaticfolder (relevant info), or - In
vue-2&vue-cli-3if you don't like to keep your files inpublicfolder (staticfolder is renamed topublic):
- 在
vue-2如果你不喜欢在你的文件static夹（相关信息），或 - 在
vue-2&vue-cli-3如果您不想将文件保存在文件public夹中（static文件夹重命名为public）：
The simple solution is :)
简单的解决方案是:)
<img src="@/assets/img/clear.gif" /> // just do this:
<img :src="require(`@/assets/img/clear.gif`)" // or do this:
<img :src="require(`@/assets/img/${imgURL}`)" // if pulling from: data() {return {imgURL: 'clear.gif'}}
If you like to keep your static images in static/assets/imgor public/assets/imgfolder, then just do:
如果您想将静态图像保存在static/assets/img或public/assets/img文件夹中，请执行以下操作：
<img src="./assets/img/clear.gif" />
回答by Pantelis Peslis
If you want to bind a string to the srcattribute, you should wrap it on single quotes:
如果要将字符串绑定到src属性，则应将其用单引号括起来：
<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">
IMO you do not need to bind a string, you could use the simple way:
IMO 您不需要绑定字符串，您可以使用简单的方法：
<img src="/static/img/clear.gif">
Check an example about the image preload here: http://codepen.io/pespantelis/pen/RWVZxL
在此处查看有关图像预加载的示例：http: //codepen.io/pespantelis/pen/RWVZxL
回答by roli roli
This is how i solve it.:
这就是我解决它的方法。：
items: [
{ title: 'Dashboard', icon: require('@/assets/icons/sidebar/dashboard.svg') },
{ title: 'Projects', icon: require('@/assets/icons/sidebar/projects.svg') },
{ title: 'Clients', icon: require('@/assets/icons/sidebar/clients.svg') },
],
And on the template part:
在模板部分：
<img :src="item.icon" />
回答by rickatech
@Pantelis answer somehow steered me to a solution for a similar misunderstanding. A message board project I'm working on needs to show an optional image. I was having fits trying to get the src=imagefile to concatenate a fixed path and variable filename string until I saw the quirky use of "''" quotes :-)
@Pantelis 的回答以某种方式引导我找到类似误解的解决方案。我正在处理的留言板项目需要显示可选图像。我试图让 src=imagefile 连接固定路径和可变文件名字符串，直到我看到“''”引号的古怪用法:-)
<template id="symp-tmpl">
<div>
<div v-for="item in items" style="clear: both;">
<div v-if="(item.imagefile !== '[none]')">
<img v-bind:src="'/storage/userimages/' + item.imagefile">
</div>
sub: <span>@{{ item.subject }}</span>
<span v-if="(login == item.author)">[edit]</span>
<br>@{{ item.author }}
<br>msg: <span>@{{ item.message }}</span>
</div>
</div>
</template>
回答by Cevin Ways
declare new variable that the value contain the path of image
声明该值包含图像路径的新变量
const imgLink = require('../../assets/your-image.png')
then call the variable
然后调用变量
export default {
name: 'onepage',
data(){
return{
img: imgLink,
}
}
}
bind that on html, this the example:
将其绑定在 html 上，示例如下：
<a href="#"><img v-bind:src="img" alt="" class="logo"></a>
hope it will help
希望它会有所帮助
