相关疑难解决方法(0)

我有一个案例,在我Vue.js的webpack网络应用程序中,我需要显示动态图像.我想显示img图像的文件名存储在变量中的哪个位置.该变量是一个computed返回Vuex存储变量的属性,该变量正在异步填充beforeMount.

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

然而,当我这样做时它完美地工作:

<img src="../assets/dog.png" alt="dog">

我的情况类似于这个小提琴,但这里它适用于img URL,但在我的实际文件路径中,它不起作用.

什么应该是正确的方法呢？

我已经阅读了几篇关于人们在使用React Native require()时遇到的问题以及尝试需要动态资源时的功能的帖子,例如:

动态(失败):

urlName = "sampleData.json";
data = require('../' + urlName);

与静态(成功):

data = require('../sampleData.json');

我已经阅读了一些线程,这是React Native中的一个错误,而在其他线程中,这是一个功能.

是否有一种新方法需要函数内的动态资源？

相关帖子(在React时间都相当老):

• 从React native中的本地json文件导入文本
• React Native - 在目录中动态列出/需要文件
• React Native - 使用动态名称的图像需求模块
• React Native:如何使用动态网址的require(路径)？

我的代码中有什么问题这是一个滑块:

<Slider {...settings}>
            {slides.map(function(item){
                return (
                    <div key={item.id} className="item-slider" 
                        style={{background: `url(images/covers/${item.cover})`}}>
                        <div className="caption">
                            <h4>{item.topic}</h4>
                            <p>{item.title}</p>

                        </div>
                    </div>
                    )  
            })}
        </Slider>

我正在使用react- slick,我测试了如果item.cover正在接收一些数据.它确实如此.但是当我坚持它的风格它没有出现并检查它,并没有收到任何错误.

示例:代码.codesandbox.io/s/5v0308l68k(无法上传图片)

我有一个带有一个组件EventCard的js文件，该文件带有事件名称，日期，事件图像等。如果事件图像不存在，我想加载一个占位符图像。现在，该语句看起来像这样

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

我正在渲染内部使用this.state作为源

source={{uri: this.state.image}}

当我需要一个占位符图像时，我奇怪地得到11，而react native抛出错误，说“ uri的值不能从Double转换为String”。

非常感谢您的帮助。

谢谢

我有这样格式的数据：

const data = [
  {
    id: '0',
    title: 'Some title 1'
  },
  {
    id: '1',
    title: 'Some title 2'
  }
  ...
]

我有一个包含图像的文件夹，其中每个图像都被称为“0.png”、“1.png”等，其数量与数据数组长度相同。我想做的是映射数据数组，显示标题和图像，其名称与元素的 id 相同。例如，

<Image source={require('./images/0.png')} />

于是我写了这段代码：

data.map(item => (
  <View>
    <Image source={require(`./images/${item.id}.png`)} />
    <Text>{item.title}</Text>
  </View>
))

这给了我这个错误： Error: TransformError: Invalid call at line 36: require("./images/" + item.id + ".png")

我也试过这样：

<Image source={require('./images/' + item.id + '.png')} />

当我 console.log 使用此串联创建的图像的路径时，它看起来没问题。

顺便说一句，这工作得很好：

<Image source={require('./images/' + 10 + '.png')} />

它显示名为“10.png”的图像

我错过了什么吗？请帮忙！

我正在努力在我的反应原生项目中包含一些标志来代表国家.我发现你不能动态地要求像下面的例子中的图像做出反应原生.

require(`../assets/flags/32/${countryCode}.png`)

所以考虑到我在这里找到的SO响应,我想创建一个带有switch语句的函数,该函数在传递正确的标志代码时会返回所需的图像.像下面这样的东西.

export const Flags = (countryCode) => {
 switch (countryCode) {
   case 'US':
    return require('../assets/flags/32/US.png');
   ....
 }
};

给出这个解决方案,我将有超过200个案例.有没有更好的方法来做到这一点？

我试图从本地文件显示图像,所以我尝试这样做

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}}
    style={{height:150,width:150}}
/>

我的容器组件似乎获得高度和宽度但图像不加载.所以我试试这个

<Image 
    source={require('../../assets/img_src/BTI.jpg')}
    style={{height:150,width:150}}
/>

它工作得很好,不幸的是据我所知我不能使用这个实现,如果我想先操作地址文件并将其存储到变量.例:

const imgSrc = `../../assets/${data.image}`;

data.image ='img_src/BTI.jpg'.我尝试在android工作室中删除我的android模拟器上的所有数据,但结果仍然相同.难道我做错了什么？这有更好的实施吗？

非常感谢 :)