使用资产变量中的图像 src

Question

我最近遇到图像问题。一切正常，直到您必须在页面上显示图像列表。

问题在于，当我们直接为带有硬编码字符串的图像提供 src 时，它会与 url 一起工作，例如 ~/assets/any-image.png。但是如果我尝试将 url 移动到任何变量/对象/数组中，我必须指定包含 URL.

的 :src="myVariable"

代码举例：

<template>
  <div>
    Problem with images
    <img :src="image.url" alt="">
    <img :src='require(image.url)' alt="">
  </div>
</template>

<script>
export default {
  data () {
    return {
      image:
        {
          url: '~/assets/icon.png',
          type: 'asset'
        }
    }
  }

}
</script>

在这里，我尝试使用带有 ~ 和 @ 的资产，也尝试使用和不使用斜线。当然图像存在于资产文件夹中，但由于 src url 是通过任何变量（不是直接）提供的，资产 url 未提供，因此图像 url 看起来像服务器上不存在的 host:port/~/assets/...。

在这个例子中，我想用包含 url 及其类型 (asset/static) 的对象替换图像 url 并检查是否为资产类型，然后使用 require(variable) 但出现 "Cannot find module '~/assets/icon.png'"

的问题

有人解决过这个问题吗？

Answer 1

绑定到资产变量图像时需要使用require。例如：

<img :src="url">

url: require('@/assets/icon.png')

如果您的 json 只包含文件名，您可以将 require 放在模板中：

<img :src="require('@/assets/' + url)">

url: 'icon.png'

Answer 2

感谢Dan with his 我有一个通用的最终解决方案：图片包含 link 并输入：

image: {
  url: '/any-asset-folder/image.png'
  type: 'asset'
}

然后用三元运算符结果是

<img
  :src="image.type === 'asset' 
    ? require('@/assets'+image.url) 
    : image.url"
>

通过这种方式，无论图像来自资产、静态还是外部，我都能正常工作:)

使用资产变量中的图像 src

Using image src from asset variables

javascript

webpack

vue.js

vue-component

vue-cli