相关疑难解决方法(0)

我目前正在使用React Native构建测试应用程序.到目前为止,Image模块一直运行良好.

例如,如果我有一个名为的图像avatar,下面的代码片段工作正常.

<Image source={require('image!avatar')} />

但是,如果我将其更改为动态字符串,我会得到

<Image source={require('image!' + 'avatar')} />

我收到错误:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

显然这是一个人为的例子,但动态图像名称很重要.React Native不支持动态图像名称吗？

我正在尝试将图像 src 动态绑定到表单的 URL ../assets/project_screens/image_name.jpg。

我的目录结构如下：

- src
 -- assets
   ---- project_screens
 -- profile
   ---- ProjectList.vue 
 -- store
   ---- profile.js

我知道我需要使用 webpackrequire("path/to/image")来帮助 webpack 构建这些图像，但是路径没有解析。

- src
 -- assets
   ---- project_screens
 -- profile
   ---- ProjectList.vue 
 -- store
   ---- profile.js

// store/profile.js
projects = [
  {
    ....
  },
  {
    ....
    img_url: "../assets/project_screens/im1.jpg"
    ....
  }
  ....
]

如果我使用 URL 字符串而不是动态传递 URL 字符串，它会起作用。环顾堆栈溢出，没有任何解决方案有帮助。我还缺少其他东西吗？

我试图通过使用来自 props 属性的路径来显示带有 img 标签的图像。

我尝试使用 更改路径@，使用整个路径src，添加../assets/组件并仅将文件名 ( orange.png) 作为道具传递。我总是显示默认的损坏图像。在浏览器中检查时，路径看起来不错。当我直接显示图像时，我可以看到路径被解析为一些不同的路径<img data-v-1212d7a4="" src="/img/orange.7b71a54c.png">。

编辑： 另外我试过这篇文章Can't dynamic pass relative src path for imgs in Vue.js + webpack，其中使用<img :src="require(picture_src)" />作为答案给出。这会导致错误：Error in render: "Error: Cannot find module '../assets/orange.png'"

（Edit2： 这个答案最终对我
有用，如我的回答帖子中所述。）let images = require.context('../assets/', false, /\.png$/)在我的脚本部分中使用类似的 webpack 方法会发生同样的错误，因为这篇文章的答案无法动态传递相对 src Vue.js + webpack 中 imgs 的路径。

我是 Vue.js 的新手，所以我不完全知道发生了什么或如何搜索这个，或者它可能与我最初尝试的没有任何关系。

当我直接通过路径时，我能够显示我的图像，就像这样

<img src="../assets/orange.png"/>

现在我实际上想将它传递给我在 props 中的组件，然后在组件内显示它从 props …

我遇到了一个奇怪的情况，

我有一个Nuxt v3带有 vite 的“标准”项目

作品

<img src="~/assets/img/image.png">
<img src="~/assets/video/video.mp4">

不起作用

<img :src="require('~/assets/img/image.png')">
<img :src="require('~/assets/video/video.mp4')">

请注意，图像路径是相同的，因此它确实存在，我收到的错误是：

找不到模块“@/assets/img/image.png”需要堆栈

该文档没有提到实现它必须要做的任何事情

有什么我应该做的吗？

src我正在尝试在 Nuxt 中显示资产文件夹中的图像，但即使HTML 中的值正确，它也无法工作。

这是代码的摘录。

<div v-for="(item, index) in items" :key="index">
  <div class="item-img">
   <img :src="`../assets/imgs/${item.img}`"/>
  </div>
</div>

上述路径是正确的，因为该组件位于与资产文件夹位于同一根级别的页面文件夹内。

我的数组中有图像文件名，如下所示：

data() {
  return {
    images: ['image0.jpg', 'image1.jpg'],
  ...
}

有一个异步函数正在调用 API 来获取一些项目。API 完成后，随机图像将添加到每个项目中。

async getMovies() {
  const data = axios.get `api_call_here`)
  const result = await data
  result.data.results.forEach((item) => {
    let randomImg = 
    this.images[Math.floor(Math.random() * 
    this.images.length)]
    item.img = randomImg
    this.items.push(item)
  })
},

我确信图像的路径是正确的并且它们存在于指定的文件夹中。我还知道该路径有效，因为我可以显示同一级别另一个组件内同一资产文件夹中的任何单个图像。

我想我已经尝试了属性内插值的每种组合src，但没有任何效果。

最后，当我在开发人员控制台中检查元素时，我可以看到元素本身的正确路径。更令人困惑的是，图像似乎占据了页面上的适当空间，但它们是空的（空白）。

我已经没有主意了。如果有人能帮助我找出问题所在，我将非常感激。

请参阅此处组件之间的关系 如何在VueJS中将值从一个子组件传递到另一个子组件？

下面的代码片段没有给出错误并且不显示图像

<img v-bind:src="image_url" /> 

代码：

<template>
  <div>
    <img v-bind:src="image_url" />
  </div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

image_url来自另一个组件，在 VueJS 开发人员工具中我能够确认该值是一个 url。看起来我尝试渲染动态图像的方式有问题。