Vue.js 模板中的静态图片 src

Question

我的 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>

给我一​​堆错误，比如：

[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'
    }
}

Answer 1

我在使用 Vue 时遇到了类似的问题，我尝试通过从配置 json 文件导入数据然后使用 v-for 迭代数据来显示多个图像。

即使我将require('../../assets/' + filename) 直接放入 json 中，图像也永远不会显示。我最终意识到 Vue 将我的数据值解释为一个字符串，而不是一个函数。 javascript 支持作为返回类型的函数是一件好事。所以我做了这个功能：

  getImagePath(filename: string) {
    return require('../../assets/' + filename);
  }

然后我从我的v-for 循环中调用了该函数，只需从我的配置中传入文件名：

<v-list-item :key="place.id" v-for="place in placesOfPower">
  <v-list-item-content class="justify-end">
    <v-img :src="getImagePath(place.image)"
           position="top center"
           height="90"
           width="30vw"/>
  </v-list-item-content>
<v-list-item-content>

Answer 2

如果您使用的是 nuxt 使用<img :src="'_nuxt/path_to_your_local_image'" />

如果你使用的是 vue 首先使用静态 src 导入：<img src="path_to_your_local_image" />

然后检查图像元素以查看呈现给浏览器的 src 然后用动态src替换它

Answer 3

我在搜索存在图像时显示图像的解决方案时发现了此线程。我想显示包含 type 属性的数据库条目列表。每种类型都应该在我的 vue assets 文件夹中有一个合适的 png 文件。如果在没有事先添加图像的情况下添加新类型，整个列表将会中断。

我在堆栈溢出时找到了"Catch an error on requiring module in node.js"。 Peter Lyons 的 answer 引导我找到了我的解决方案：

<template>
  <v-data-table :items="items">
    <template v-slot:item.type="{ item }">
      <v-img
        v-if="typeImageSource(item.type)"
        :src="typeImageSource(item.type)"
      />
      <template v-else>
        {{ item.type }}
      </template>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data () {
    return {
      // In reality this gets filled from a db:
      items: [
        { id: 1, type: 'abc' },
        { id: 2, type: 'abcd' },
        { id: 3, type: 'efg' },
      ]
    }
  },
  methods: {
    typeImageSource: function (type) {
      let src = ''
      try {
        src = require(`@/assets/types/${('' + type).toLowerCase()}.png`)
      } catch (error) {
        console.warn(`Image for type ${type} could not be found! Please add "${('' + type).toLowerCase()}.png" to the folder "@/assets/types/".\n\n`, error)
        return null
      }
      return src
    },
  },
}
</script>

Answer 4

您只需要使用简单的代码 <img alt="img" src="../assets/index.png" />

不要忘记 balise img 中的属性 alt

Answer 5

此解决方案适用于 Vue-2 用户：

1. 如果您不喜欢将文件保存在 static 文件夹 (relevant info) 中，则在 vue-2 中，或者
2. 在vue-2 和vue-cli-3 中，如果您不想将文件保存在public 文件夹中（static 文件夹重命名为public）：

简单的解决方案是:)

<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'}}

如果您想将静态图像保存在 static/assets/img 或 public/assets/img 文件夹中，那么只需这样做：

<img src="./assets/img/clear.gif" />
<img src="/assets/img/clear.gif" /> // in some case without dot ./

Answer 6

声明值包含图片路径的新变量

const imgLink = require('../../assets/your-image.png')

然后调用变量

export default {
    name: 'onepage',
    data(){
        return{
            img: imgLink,
        }
    }
}

在html上绑定，这个例子：

<a href="#"><img v-bind:src="img" alt="" class="logo"></a>

希望对你有帮助

Answer 7

我就是这样解决的：

      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') },
      ],

在模板部分：

<img :src="item.icon" />

See it in action here

Answer 8

@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>

Answer 9

如果要将字符串绑定到src 属性，则应将其用单引号括起来：

<img v-bind:src="'/static/img/clear.gif'">
<!-- or shorthand -->
<img :src="'/static/img/clear.gif'">

IMO你不需要绑定字符串，你可以使用简单的方法：

<img src="/static/img/clear.gif">

在此处查看有关图像预加载的示例：http://codepen.io/pespantelis/pen/RWVZxL