vue+element-ui 动态加载本地图片

在Vue和Element-UI中动态加载本地图片可以使用require语法。首先，将图片路径存储在数据库中。然后，在Vue组件中，通过使用`require()`函数来加载图片。下面是一个示例代码：

<template>
  <el-image class="table-td-thumb" :src="require(scope.row.img)"></el-image>
</template>

在这个例子中，`scope.row.img`是从数据库中获取的图片路径。通过使用`require()`函数来加载图片，确保路径正确。这样就能够实现在Vue和Element-UI中动态加载本地图片。

请注意，不需要在`require()`函数周围添加引号，如你提到的错误代码`require(../../assets/img/coca.jpg)`。正确的写法是`:src="require('../../assets/img/coca.jpg')"`。

希望这个回答对你有帮助！

相关问题

vue+element-ui动态加载多个assets中以书籍id命名且与书籍id对应的图片

您好！针对您的问题，我理解您的需求是在使用 Vue 和 Element-UI 开发中，需要根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。您可以按照以下步骤进行操作：

1. 在 Vue 组件中引入 Element-UI 中的 Upload 组件，并设置属性 action 为上传图片的接口地址。

2. 在接口中，将上传的图片保存到指定的文件夹中，并将图片的文件名设置为书籍 id。

3. 在 Vue 组件中使用 v-for 遍历书籍列表，并使用 v-bind:src 绑定书籍对应的图片地址。

4. 在绑定图片地址时，使用 require 动态加载图片，代码如下：

<img v-bind:src="require(`@/assets/${book.id}.jpg`)">

其中，`@/assets/` 是指 assets 文件夹的路径，`${book.id}.jpg` 是指书籍对应的图片文件名。

通过这样的方式，您可以根据书籍 id 动态加载多个 assets 中以书籍 id 命名且与书籍 id 对应的图片。希望这个解答能够对您有所帮助！

vue+element-ui动态加载assets中以书籍id命名且与书籍id对应的图片

好的，针对您的问题，我可以给您提供以下思路：

1. 在Vue组件中，可以通过使用require()方法来动态加载图片资源，例如：

<template>
  <div>
    <img :src="bookImgUrl" />
  </div>
</template>

<script>
export default {
  props: {
    bookId: String
  },
  computed: {
    bookImgUrl() {
      return require(`@/assets/${this.bookId}.jpg`);
    }
  }
}
</script>

上面的代码中，bookId是通过props传入的，然后通过computed计算属性来动态生成图片资源的路径，最后在img标签中使用即可。

2. 在使用上述方法时，需要确保assets目录下存在以bookId命名的图片资源，否则会导致加载失败。

3. 另外，如果您的图片资源不是以jpg格式保存，可以将上述代码中的`.jpg`替换成对应的格式后缀即可。

希望以上内容能对您有所帮助！